/* ============================================================================
   Fantasy Basketball (NBA) — web de presentación

   La página va en negro cálido a propósito. La app es crema y naranja, y sobre
   un fondo oscuro las capturas se encienden solas: son lo único luminoso de la
   pantalla, así que la mirada va donde tiene que ir sin subrayar nada.

   La pieza central es UN acto fijado (`.acto`): una secuencia de fotogramas en
   un canvas con el texto encima, que se releva por tramos de scroll. La
   animación no es un adorno antes del contenido: es el contenedor del contenido.

   ── OJO AL EDITAR ─────────────────────────────────────────────────────────────
   Este fichero y el de la web de la WNBA (`../wnba/styles.css`) son IDÉNTICOS
   salvo el bloque `:root` de abajo. Todo el color de marca pasa por variables
   justamente para eso: si tocas una regla aquí, cópiala allí tal cual, y si
   tienes que meter un color nuevo, mételo como variable y no a pelo.
   ============================================================================ */

:root {
  /* ── Lo único que cambia entre las dos webs ──────────────────────────────── */
  --acento:       #FF5A1F;        /* naranja de la app (#ea580c), subido de brillo
                                     para que aguante sobre negro */
  --acento-suave: #FF8A5B;
  --acento-rgb:   255, 90, 31;
  --acento-2:     #17B8A6;        /* el secundario, para lo que no es acción */
  --sobre-acento: #140F0B;        /* texto sobre un botón lleno */

  /* El negro de la página tira a cálido, como la app. */
  --tinta:      #0A0910;
  --tinta-rgb:  10, 9, 16;
  --tinta-2:    #12111A;
  --hueso:      #F2EDE4;
  --hueso-rgb:  242, 237, 228;
  --apagado:    #918A80;
  --tenue:      #847E75;

  /* El fondo de la app, que es lo que se ve en el móvil hasta que llega el
     primer fotograma. Crema, como la NBA. */
  --pantalla-app: #F7F2EA;
  --sombra-texto: 6, 5, 10;

  /* ── Común a las dos ─────────────────────────────────────────────────────── */
  --linea:      rgba(var(--hueso-rgb), .10);
  --linea-viva: rgba(var(--hueso-rgb), .22);

  --ancho:      min(1240px, 92vw);
  --radio:      18px;
  --radio-sm:   11px;

  --f-display: 'Anton', 'Haettenschweiler', 'Arial Narrow', system-ui, sans-serif;
  --f-texto:   'Inter Tight', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Una sola curva para todo: el movimiento se lee como una decisión, no como
     ajustes sueltos. */
  --sal: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  background: var(--tinta);
}

body {
  margin: 0;
  background: var(--tinta);
  color: var(--hueso);
  font-family: var(--f-texto);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--acento); color: var(--sobre-acento); }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 4px; }

.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--acento); color: var(--sobre-acento);
  padding: 10px 18px; font-weight: 700; border-radius: 0 0 var(--radio-sm) 0;
}
.saltar:focus { left: 0; }

/* ── Tipos ─────────────────────────────────────────────────────────────────── */

.display {
  font-family: var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
  /* Anton viene muy apretada; un pelo de aire evita que las mayúsculas grandes
     se peguen entre sí. */
  letter-spacing: .012em;
  line-height: .92;
  font-size: clamp(2.5rem, 5.4vw, 4.6rem);
  margin: 0;
}
.display--sm { font-size: clamp(2.1rem, 4.2vw, 3.5rem); }
.display--cierre { font-size: clamp(2.7rem, 6vw, 5rem); margin-bottom: 20px; }

.titulo {
  font-family: var(--f-display);
  font-weight: 400; text-transform: uppercase; letter-spacing: .012em;
  line-height: .96; font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  margin: 0 0 18px;
}
.titulo--sm { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 10px; }

.acento { color: var(--acento); }

.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .19em; text-transform: uppercase;
  color: var(--apagado); margin: 0 0 16px;
}

.parrafo { color: var(--apagado); max-width: 54ch; margin: 0; }

/* ── Botones ───────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--acento); color: var(--sobre-acento);
  font-weight: 700; font-size: 15px; letter-spacing: .01em;
  padding: 14px 24px; border-radius: 999px; text-decoration: none;
  border: 1px solid transparent;
  transition: transform .32s var(--sal), background-color .32s var(--sal), box-shadow .32s var(--sal);
}
.btn:hover {
  transform: translateY(-2px); background: var(--acento-suave);
  box-shadow: 0 12px 30px -12px rgba(var(--acento-rgb), .7);
}
.btn:active { transform: translateY(0); }

.btn--fantasma { background: transparent; color: var(--hueso); border-color: var(--linea-viva); }
.btn--fantasma:hover { background: rgba(var(--hueso-rgb), .06); border-color: var(--hueso); box-shadow: none; }

.btn--sm { padding: 10px 18px; font-size: 14px; }
.btn--grande { padding: 17px 30px; font-size: 16px; }
.btn--grande span { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.btn--grande small { font-size: 11px; font-weight: 600; opacity: .72; letter-spacing: .06em; text-transform: uppercase; }
.btn__icono { width: 20px; height: 20px; fill: currentColor; }

/* Mientras no haya ficha en Play Store, el botón no promete lo que no hay. */
.btn[data-pendiente="true"] { opacity: .55; cursor: not-allowed; }
.btn[data-pendiente="true"]:hover { transform: none; box-shadow: none; background: var(--acento); }

/* ── Barra superior ────────────────────────────────────────────────────────── */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  padding: 16px max(24px, 4vw);
  border-bottom: 1px solid transparent;
  transition: background-color .4s var(--sal), border-color .4s var(--sal);
}
.nav.is-pegada {
  background: rgba(var(--tinta-rgb), .74);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--linea);
}

.nav__marca {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 15px; letter-spacing: -.01em;
  text-decoration: none; margin-right: auto;
  /* El nombre es largo —«Fantasy W-Basketball»— y a 320 px caía a dos líneas,
     engordando la barra de 78 a 100 px y empujando todo lo de abajo. */
  white-space: nowrap;
}

/* Móviles estrechos (320 px): con el nombre en una línea, lo que falta es sitio.
   Se encoge un punto la marca y el botón, y siguen cabiendo los dos. */
@media (max-width: 400px) {
  .nav { gap: 12px; padding-inline: 16px; }
  .nav__marca { font-size: 13.5px; gap: 8px; }
  .nav__pelota { width: 19px; height: 19px; }
  .btn--sm { padding: 9px 14px; font-size: 13px; }
}
.nav__pelota { width: 22px; height: 22px; }
.nav__pelota circle { fill: var(--acento); }
.nav__pelota path { stroke: var(--tinta); stroke-width: 6; fill: none; }

.nav__enlaces { display: flex; gap: 26px; }
.nav__enlaces a {
  font-size: 14.5px; font-weight: 500; color: var(--apagado);
  text-decoration: none; transition: color .28s var(--sal);
}
.nav__enlaces a:hover { color: var(--hueso); }

@media (max-width: 860px) { .nav__enlaces { display: none; } }

/* ══ EL ACTO ═════════════════════════════════════════════════════════════════
   Ocupa la pantalla entera mientras dura su secuencia. El canvas es el
   escenario; el texto va encima y se releva por tramos. */

.acto { position: relative; }

.acto__pin {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: 96px max(24px, 4vw) 64px;
}

.lienzo { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; }

/* ── Los textos que se relevan ─────────────────────────────────────────────── */

.beats {
  grid-area: 1 / 1;
  position: relative;
  z-index: 5;
  justify-self: start;
  align-self: center;
  width: min(38ch, 42vw);
  pointer-events: none;
  /* Alto reservado: si cada tramo midiera lo suyo, el bloque daría saltos al
     cambiar de texto. */
  min-height: 16rem;
  display: grid;
}

.beat {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .5s var(--sal), transform .6s var(--sal);
  align-self: center;
  /* El texto va sobre la imagen: una sombra ancha y suave lo despega sin
     ensuciar el fondo. */
  text-shadow: 0 2px 26px rgba(var(--sombra-texto), .92);
}
.beat.is-on { opacity: 1; transform: translateY(0); }

.beat__texto { color: var(--apagado); margin: 20px 0 0; max-width: 36ch; }
.beat__texto em { color: var(--hueso); font-style: normal; font-weight: 600; }

.eyebrow--fijo {
  grid-area: 1 / 1;
  align-self: center;
  /* Pegada al bloque de texto, no en lo alto de la columna: suelta arriba dejaba
     un vacío enorme entre ella y el titular. */
  transform: translateY(-9rem);
  margin: 0;
  color: var(--acento);
  opacity: .85;
}

/* Las líneas del titular entran tras una máscara: el texto se revela, no se
   desplaza, que es lo que lo hace sentir impreso. */
.linea { display: block; overflow: hidden; }
.linea > span { display: block; }

/* ── El móvil ──────────────────────────────────────────────────────────────── */

.movil {
  grid-area: 1 / 1;
  justify-self: end;
  position: relative;
  height: min(84svh, 760px);
  aspect-ratio: 520 / 1125;
  border-radius: 40px;
  padding: 8px;
  background: linear-gradient(160deg, #2A2833, #121118 55%, #23212C);
  box-shadow: 0 46px 100px -34px rgba(0, 0, 0, .95), 0 0 0 1px rgba(var(--hueso-rgb), .07);
}
.movil__marco {
  position: relative; width: 100%; height: 100%;
  border-radius: 33px; overflow: hidden; background: var(--pantalla-app);
}
.acto--app .beats { justify-self: start; }

/* ── El acto en pantalla estrecha ──────────────────────────────────────────── */

@media (max-width: 1000px) {
  .acto__pin { padding: 84px max(20px, 4vw) 56px; }

  /* El móvil pasa a ocupar todo el ancho y el texto se le pone encima, en la
     mitad de abajo, donde la sombra del texto lo sostiene. */
  .movil {
    justify-self: center;
    height: min(74svh, 640px);
    width: 100%;
    max-width: 460px;
  }

  .acto--app .beats, .beats {
    justify-self: center;
    align-self: end;
    text-align: center;
    width: min(46ch, 100%);
    min-height: 0;
    padding-bottom: 6px;
  }
  .beat__texto { margin-left: auto; margin-right: auto; }
  .beat { text-shadow: 0 2px 30px rgba(var(--sombra-texto), .98), 0 0 60px rgba(var(--sombra-texto), .8); }
  .display { font-size: clamp(2.1rem, 9vw, 3rem); }
  .display--sm { font-size: clamp(1.9rem, 8vw, 2.6rem); }
}

/* Sin movimiento: los tramos dejan de superponerse y se leen en columna. */
.sin-movimiento .beats { min-height: 0; display: block; }
.sin-movimiento .beat { opacity: 1; transform: none; margin-bottom: 32px; }


/* ══ Portada ═════════════════════════════════════════════════════════════════
   Sin scroll secuestrado. Aquí había una secuencia fijada del tiro que no se
   entendía y que además se perdía al volver arriba; se quitó entera. El único
   movimiento es el balón, que se anima SOLO y deja de verse al bajar. */

.portada {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 460px);
  align-items: center;
  gap: clamp(30px, 5vw, 80px);
  width: var(--ancho);
  margin: 0 auto;
  padding: 116px 0 72px;
}

.portada__texto { max-width: 34ch; }
.portada__entrada { color: var(--apagado); margin: 26px 0 30px; }
.portada__entrada em { color: var(--hueso); font-style: normal; font-weight: 600; }
.portada__acciones { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 38px; }

.portada__datos {
  display: flex; gap: clamp(20px, 3vw, 38px);
  list-style: none; margin: 0; padding: 24px 0 0;
  border-top: 1px solid var(--linea);
}
.portada__datos li { display: flex; flex-direction: column; }
.portada__datos b {
  font-family: var(--f-display); font-size: 32px; font-weight: 400;
  letter-spacing: .01em; line-height: 1;
}
.portada__datos span { font-size: 12.5px; color: var(--apagado); margin-top: 5px; }

/* ── El balón, animándose por su cuenta ────────────────────────────────────── */

.bote {
  position: relative;
  /* `clip` en vez de `hidden`: recorta lo que se salga a los lados sin crear un
     contenedor de scroll que corte el balón al saltar. */
  overflow-x: clip;
  height: min(62svh, 520px);
  display: grid;
  place-items: end center;
  --alto: clamp(150px, 22vh, 250px);   /* cuánto sube */
  --bola: clamp(120px, 15vw, 190px);
}

/* Un halo en el punto de contacto: da suelo sin dibujar una línea, que sobre
   negro cantaría como el borde de una caja. */
.bote__pista {
  position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%);
  width: 100%; height: 190px;
  background: radial-gradient(50% 50% at 50% 100%, rgba(var(--acento-rgb), .17), transparent 72%);
  filter: blur(16px);
}

.bote__sombra {
  position: absolute; bottom: 4px; left: 50%;
  width: var(--bola); height: calc(var(--bola) * .22);
  margin-left: calc(var(--bola) / -2);
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .78), transparent 70%);
  animation: sombra 1s cubic-bezier(.5, 0, .9, .55) infinite alternate;
}

.bote__salto {
  position: relative;
  animation: salta 1s cubic-bezier(.5, 0, .9, .55) infinite alternate;
}
/* El aplastamiento va en su propia capa: si compartiera transform con el salto,
   una animación pisaría a la otra. */
.bote__aplasta {
  animation: aplasta 1s cubic-bezier(.5, 0, .9, .55) infinite alternate;
  transform-origin: 50% 100%;
}
.bote__bola {
  width: var(--bola); height: var(--bola);
  animation: gira 2.8s linear infinite;
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .55));
}

/* `alternate` con una curva que acelera: la caída se lee como gravedad y la
   subida, al ir del revés, frena arriba. Es todo el truco. */
@keyframes salta {
  from { transform: translateY(calc(var(--alto) * -1)); }
  to   { transform: translateY(0); }
}
@keyframes aplasta {
  0%, 86% { transform: scale(1, 1); }
  100%    { transform: scale(1.11, .89); }
}
@keyframes sombra {
  from { transform: scaleX(1.5); opacity: .22; }
  to   { transform: scaleX(.92); opacity: .62; }
}
@keyframes gira { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .portada {
    grid-template-columns: 1fr;
    text-align: center;
    padding-top: 100px;
    gap: 18px;
  }
  .portada__texto { max-width: none; margin-inline: auto; }
  .portada__acciones, .portada__datos { justify-content: center; }
  .bote { height: min(38svh, 300px); --alto: clamp(90px, 14vh, 150px); --bola: clamp(96px, 26vw, 140px); }
}

/* ══ El mercado ══════════════════════════════════════════════════════════════ */

/* Pantalla completa y contenido centrado, y no por gusto: siendo una sección
   corta, su texto y el del acto siguiente cabían a la vez y se leían apilados
   en la misma columna. Ocupando una pantalla, cuando el acto empieza a asomar
   por abajo este texto ya se ha ido por arriba. */
.mercado {
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: clamp(96px, 12vh, 150px) 0;
}
.mercado__interior {
  width: var(--ancho); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(30px, 5vw, 70px); align-items: center;
}
.mercado__lista { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 16px; }
.mercado__lista li {
  color: var(--apagado); font-size: 15.5px;
  padding-left: 16px; border-left: 2px solid var(--acento);
}
.mercado__lista b { color: var(--hueso); font-weight: 600; }

.grafico {
  border: 1px solid var(--linea); border-radius: var(--radio);
  background: var(--tinta-2); padding: clamp(20px, 3vw, 34px);
}
.grafico svg { width: 100%; height: clamp(150px, 22vw, 230px); }
.grafico__linea { stroke-dasharray: 1000; stroke-dashoffset: 1000; }

@media (max-width: 900px) { .mercado__interior { grid-template-columns: 1fr; } }

/* ── Cinta ─────────────────────────────────────────────────────────────────── */

.cinta {
  border-block: 1px solid var(--linea);
  padding: 18px 0; overflow: hidden; background: var(--tinta-2);
  /* Los bordes se difuminan para que el bucle no se corte en seco. */
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.cinta__via { display: flex; width: max-content; animation: desliza 34s linear infinite; }
.cinta__grupo { display: flex; align-items: center; gap: 26px; padding-right: 26px; }
.cinta__grupo span {
  font-family: var(--f-display); font-size: clamp(17px, 2vw, 23px);
  text-transform: uppercase; letter-spacing: .02em; white-space: nowrap;
  color: rgba(var(--hueso-rgb), .62);
}
.cinta__grupo i { color: var(--acento); font-style: normal; font-size: 8px; }
@keyframes desliza { to { transform: translateX(-50%); } }

/* ══ La temporada ════════════════════════════════════════════════════════════
   Las cifras y la fecha de estreno a la izquierda, la captura a la derecha en
   las dos filas. Sin envoltorio extra: se resuelve con áreas de rejilla. */

.temporada { padding: clamp(70px, 8vw, 110px) 0; }
.temporada__cabecera { width: var(--ancho); margin: 0 auto clamp(36px, 5vw, 56px); }

.temporada__interior {
  width: var(--ancho); margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 330px);
  grid-template-areas: "cifras foto" "arranque foto";
  gap: clamp(22px, 3vw, 40px);
  align-items: start;
}

.cifras {
  grid-area: cifras;
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 18px);
}
.cifras li {
  border: 1px solid var(--linea); border-radius: var(--radio-sm);
  background: var(--tinta-2); padding: 20px 22px;
  display: flex; flex-direction: column; gap: 4px;
}
.cifras b {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(1.9rem, 3.4vw, 2.6rem); letter-spacing: .01em; line-height: 1;
  color: var(--acento);
}
.cifras span { font-size: 13.5px; color: var(--apagado); line-height: 1.45; }

.arranque {
  grid-area: arranque;
  border: 1px solid var(--linea); border-radius: var(--radio);
  background: radial-gradient(110% 100% at 0% 0%, rgba(var(--acento-rgb), .12), transparent 60%), var(--tinta-2);
  padding: clamp(22px, 2.6vw, 30px);
}
.arranque .eyebrow { margin-bottom: 8px; }
.arranque__fecha {
  display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px;
  font-family: var(--f-display); font-weight: 400; letter-spacing: .015em; line-height: 1;
}
.arranque__fecha b { font-weight: 400; font-size: clamp(2rem, 4vw, 2.9rem); }
.arranque__fecha span { font-size: clamp(1.1rem, 2vw, 1.5rem); color: var(--acento); }

.temporada__foto {
  grid-area: foto; align-self: center;
  width: 100%; border-radius: var(--radio);
  border: 1px solid var(--linea);
  aspect-ratio: 800 / 1180; object-fit: cover; object-position: top center;
}

@media (max-width: 860px) {
  .temporada__interior {
    grid-template-columns: 1fr;
    grid-template-areas: "cifras" "arranque" "foto";
  }
  .temporada__foto { max-width: 330px; margin-inline: auto; }
}

/* ══ La app hermana ══════════════════════════════════════════════════════════
   Una banda fina, no una sección: es una nota al pie, no el argumento. */

.hermana { border-block: 1px solid var(--linea); background: var(--tinta-2); }
.hermana__interior {
  width: var(--ancho); margin: 0 auto;
  padding: clamp(34px, 4vw, 52px) 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 22px; justify-content: space-between;
}
.hermana .titulo--sm { color: var(--acento-2); }
.hermana .parrafo { max-width: 46ch; }

/* ── Cierre ────────────────────────────────────────────────────────────────── */

.cierre {
  padding: clamp(76px, 9vw, 120px) max(24px, 4vw);
  text-align: center;
  background: radial-gradient(70% 60% at 50% 100%, rgba(var(--acento-rgb), .16), transparent 70%), var(--tinta);
}
.cierre__interior { max-width: 720px; margin: 0 auto; }
.cierre .parrafo { margin: 0 auto 32px; }
.cierre__acciones { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.cierre__nota { margin: 18px 0 0; font-size: 13.5px; color: var(--apagado); }

/* ── Pie ───────────────────────────────────────────────────────────────────── */

.pie { border-top: 1px solid var(--linea); padding: 46px max(24px, 4vw) 60px; background: var(--tinta-2); }
.pie__fila {
  display: flex; flex-wrap: wrap; gap: 18px;
  align-items: center; justify-content: space-between; margin-bottom: 26px;
}
.pie__enlaces { display: flex; flex-wrap: wrap; gap: 22px; }
.pie__enlaces a { font-size: 14px; color: var(--apagado); text-decoration: none; }
.pie__enlaces a:hover { color: var(--hueso); }
.pie__legal {
  margin: 0 0 8px; font-size: 12.5px; line-height: 1.6; color: var(--tenue); max-width: 74ch;
}

/* ── Movimiento reducido ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .cinta__via { animation: none; }
  .acto__pin { min-height: auto; }
}