/* ===========================================================================
   BALLERLINK — HOJA DE ESTILOS (styles.css)
   ===========================================================================

   ¿QUÉ ES ESTE ARCHIVO?
   Si index.html es el esqueleto, esto es la ropa, el maquillaje y la
   coreografía. Aquí se decide de qué color es cada cosa, qué tamaño tiene,
   dónde se coloca y cómo se mueve.

   CÓMO SE LEE UNA REGLA DE CSS

       .snet { color: red; }
        │      │      │
        │      │      └── valor:    lo que quieres que valga
        │      └───────── propiedad: qué quieres cambiar
        └──────────────── selector:  a QUIÉN se lo cambias

   Los selectores más habituales:
       .snet       → todos los elementos con class="snet"
       #nav        → el elemento con id="nav" (solo hay uno)
       h1, h2      → todos los h1 Y todos los h2
       .snet p     → los <p> que estén DENTRO de un .snet
       .snet:hover → un .snet, pero solo mientras el ratón está encima
       .snet::after→ una cajita invisible que el CSS inventa dentro del .snet

   Un texto entre barra-asterisco y asterisco-barra es un comentario, como
   este: el navegador lo salta.

   DOS CONCEPTOS QUE HAY QUE ENTENDER SÍ O SÍ

   1) LAS VARIABLES (--algo)
      Se declaran una vez arriba del todo y se usan por todas partes con
      var(--algo). Cambias el naranja en un sitio y cambia en las 200 veces
      que aparece. Es lo que hace que esta web se pueda "retematizar" en un
      minuto.

   2) EL POSICIONAMIENTO (position)
      · static   → lo normal, va donde le toca en el flujo de la página.
      · relative → va donde le toca, pero se puede desplazar un poco Y sirve
                   de "punto de referencia" para los hijos absolutos.
      · absolute → se despega del flujo y se coloca respecto a su antepasado
                   con position:relative más cercano.
      · fixed    → se despega y se queda clavado en la pantalla, aunque
                   hagas scroll (la barra de navegación).
      · sticky   → mezcla de los dos: se comporta normal hasta que llega al
                   borde que le marques, y ahí se queda pegado (el móvil de
                   la sección "La app por dentro").

   ÍNDICE
     1. Variables y ajustes globales
     2. Preloader
     3. Cursor y barra de progreso
     4. Barra de navegación
     5. Botones
     6. Portada (hero)
     7. Cinta naranja (marquee)
     8. Encabezados de sección
     9. Rejilla de funciones
    10. Recorrido con el móvil pegado
    11. Reproductor del trailer
    12. Ranking y rangos
    13. Redes sociales
    14. Privacidad
    15. Llamada final a la acción
    16. Pie de página
    17. Animaciones de aparición al hacer scroll
    18. Responsive (móvil y tablet)
   =========================================================================== */


/* ===========================================================================
   1. VARIABLES Y AJUSTES GLOBALES
   =========================================================================== */

/* :root es la raíz del documento. Las variables que se declaran aquí están
   disponibles en TODO el archivo. Es el panel de control de la web: casi
   cualquier cambio de aspecto empieza tocando estas 15 líneas. */
:root{
  --navy:        #081425;  /* Azul noche del fondo. Copiado de la app. */
  --navy-2:      #0C1D33;  /* Un pelín más claro (variantes de apoyo). */
  --navy-3:      #12263F;
  --card:        #101F35;  /* Fondo de las tarjetas. */
  --line:        rgba(190,198,224,.14); /* Los bordes tenues. Ver nota (*) */
  --orange:      #FF5F1F;  /* EL naranja de BallerLink. */
  --orange-soft: #FF8A4C;  /* Naranja aclarado, para textos pequeños. */
  --orange-deep: #390C00;  /* Marrón muy oscuro: el texto sobre botón naranja. */
  --text:        #EDF1FA;  /* Blanco roto de los textos. */
  --muted:       #BEC6E0;  /* Gris azulado de los párrafos secundarios. */
  --gold:        #FFD700;  /* Dorado del rango ALL-STAR. */
  --shadow:      0 24px 60px rgba(0,0,0,.5); /* Sombra grande reutilizable. */
  --ease:        cubic-bezier(.16,1,.3,1);   /* Ver nota (**) */
  --wrap:        1180px;   /* Ancho máximo del contenido. */

  /* (*) rgba(r, g, b, a): los tres primeros números son rojo, verde y azul
         de 0 a 255; el cuarto es la opacidad de 0 (invisible) a 1 (opaco).
         Un borde a .14 de opacidad se "mezcla" con el fondo y queda mucho
         más elegante que un gris fijo.

     (**) cubic-bezier es una curva de velocidad: dice si una animación
          empieza rápido y frena, o al revés. Esta concreta arranca disparada
          y frena muy suave al final; es la que da esa sensación "cara". */
}

/* El asterisco significa "absolutamente todos los elementos".
   box-sizing:border-box es EL ajuste más útil del CSS: hace que cuando dices
   "esta caja mide 300px", los 300px incluyan el borde y el relleno interior.
   Sin él, una caja de 300px con 20px de relleno acaba midiendo 340 y todos
   los cálculos se descuadran. */
*{box-sizing:border-box}

/* Hace que los saltos a #secciones se deslicen en vez de dar un salto seco. */
html{scroll-behavior:smooth}

body{
  margin:0;                      /* El navegador pone un margen por defecto; fuera. */
  background:var(--navy);
  color:var(--text);             /* Los hijos heredan este color si no dicen otra cosa. */
  /* La lista de fuentes es un plan de emergencia: si Atkinson no ha cargado
     todavía, usa la del sistema; si tampoco, cualquier sans-serif. */
  font-family:"Atkinson Hyperlegible", system-ui, -apple-system, Segoe UI, sans-serif;
  font-size:17px;
  line-height:1.65;              /* Espacio entre renglones = 1,65 veces la letra. */
  overflow-x:hidden;             /* Prohíbe el scroll horizontal (la cinta inclinada asoma un poco). */
  -webkit-font-smoothing:antialiased; /* Letras más finas y limpias en Mac. */
}

/* Clase que el JavaScript le pone al body mientras se ve la pantalla de
   carga: bloquea el scroll para que no puedas bajar antes de tiempo. */
body.is-locked{overflow:hidden}

/* Dos reglas de higiene para TODAS las imágenes:
   max-width:100% → nunca se salen de su contenedor aunque sean enormes.
   display:block  → quita el hueco fantasma que las imágenes dejan debajo. */
img{max-width:100%;display:block}

/* Que los enlaces hereden el color del texto en vez del azul de fábrica. */
a{color:inherit}

/* Todos los titulares en Anton. Impact es el plan B (existe en casi todos los
   ordenadores y es igual de gorda y estrecha). */
h1,h2,h3{font-family:"Anton", Impact, sans-serif;font-weight:400;letter-spacing:.02em;line-height:.95;margin:0}

/* Aquí "secuestramos" la etiqueta <em>. Normalmente pone en cursiva; nosotros
   le quitamos la cursiva y la usamos como "esta parte va en naranja". */
em{font-style:normal;color:var(--orange)}

/* EL CARRIL CENTRAL. min(A, B) elige el menor de los dos valores:
     · en pantalla grande gana 1180px    → el contenido no se estira infinito
     · en móvil gana "100% - 40px"       → 20px de aire a cada lado
   margin-inline:auto lo centra horizontalmente. */
.wrap{width:min(var(--wrap), 100% - 40px);margin-inline:auto}

/* clamp(mínimo, ideal, máximo) es magia para el diseño adaptable:
   "quiero 11vw de separación (11% del ancho de pantalla), pero nunca menos
   de 80px ni más de 150px". Una sola línea sustituye a tres media queries. */
.section{padding:clamp(80px,11vw,150px) 0;position:relative}

/* El color del texto cuando lo seleccionas con el ratón. Detalle pequeño que
   hace que la web se sienta "acabada". */
::selection{background:var(--orange);color:var(--orange-deep)}

/* ---------- La barra de scroll, pintada a mano ----------
   Las reglas ::-webkit-... solo funcionan en Chrome, Edge y Safari. En
   Firefox se ignoran y sale la barra normal; no pasa nada. */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--navy)}       /* El carril. */
::-webkit-scrollbar-thumb{background:#22375a;border-radius:10px} /* La pastilla. */
::-webkit-scrollbar-thumb:hover{background:var(--orange)}


/* ===========================================================================
   2. PRELOADER — la pantalla de carga
   =========================================================================== */

.preloader{
  /* fixed + inset:0 = "tápalo TODO y quédate ahí aunque se haga scroll".
     inset:0 es la forma corta de escribir top:0; right:0; bottom:0; left:0. */
  position:fixed;inset:0;
  /* z-index es la altura en el eje de profundidad: quién tapa a quién. 200 es
     el número más alto de toda la web, así que el preloader tapa hasta el
     cursor personalizado (150) y la barra de navegación (100). */
  z-index:200;
  background:var(--navy);
  /* display:grid + place-content:center = centrado perfecto, horizontal y
     vertical, sin trucos raros. gap:22px separa el logo, el texto y la barra. */
  display:grid;place-content:center;justify-items:center;gap:22px;
  /* transition = "cuando alguna de estas propiedades cambie, no lo hagas de
     golpe: tarda 0,7 segundos". Aquí es lo que hace que el preloader se
     desvanezca suavemente cuando el JS le añade la clase is-done. */
  transition:opacity .7s var(--ease), visibility .7s;
}
/* El JavaScript añade esta clase cuando la página está lista. */
.preloader.is-done{opacity:0;visibility:hidden}

/* El logo que bota. La animación se llama "dribble" y está definida justo
   debajo. "infinite" = no para nunca. */
.preloader__ball{width:92px;animation:dribble 1s cubic-bezier(.5,0,.5,1) infinite}
.preloader__ball img{filter:drop-shadow(0 12px 24px rgba(255,95,31,.45))}

/* @keyframes define una animación por fotogramas: qué aspecto tiene en cada
   momento, del 0% (principio) al 100% (final).
   El truco del bote realista está en scale(1.05,.94): al tocar el suelo el
   balón se achata (más ancho, menos alto), como haría uno de verdad. */
@keyframes dribble{
  0%,100%{transform:translateY(-26px) scale(1,1)}  /* Arriba, redondo. */
  45%{transform:translateY(0) scale(1.05,.94)}     /* Abajo, achatado. */
  55%{transform:translateY(0) scale(1.05,.94)}
}

.preloader__word{
  font-family:"Anton",sans-serif;font-size:clamp(28px,6vw,46px);
  font-style:italic;letter-spacing:.06em;color:var(--orange);margin:0;
}

/* La barrita de carga: el contenedor gris y, dentro, el <span> naranja que
   crece de 0 a 100% de ancho. overflow:hidden recorta las esquinas para que
   la parte naranja no se salga del redondeo. */
.preloader__bar{width:180px;height:3px;background:rgba(255,255,255,.12);border-radius:99px;overflow:hidden}
/* "forwards" es importante: significa "al acabar, quédate como estás" (al
   100% de ancho). Sin él, la barra volvería de golpe a 0. */
.preloader__bar span{display:block;height:100%;width:0;background:var(--orange);animation:load 1.4s ease forwards}
/* Cuando solo importa el estado final, se puede escribir solo el "to". */
@keyframes load{to{width:100%}}


/* ===========================================================================
   3. CURSOR PERSONALIZADO Y BARRA DE PROGRESO
   =========================================================================== */

.cursor{
  position:fixed;top:0;left:0;width:26px;height:26px;
  border-radius:50%;              /* 50% en un cuadrado = círculo perfecto. */
  border:1.5px solid var(--orange);
  /* pointer-events:none es CLAVE: hace que el círculo sea "atravesable" por
     el ratón. Sin esto, el círculo estaría siempre encima y no podrías
     pulsar ningún botón. */
  pointer-events:none;
  z-index:150;
  /* Lo desplaza media anchura y media altura hacia arriba y a la izquierda,
     para que el centro del círculo caiga justo en la punta del ratón. */
  transform:translate(-50%,-50%);
  transition:width .25s,height .25s,background .25s,opacity .3s;
  opacity:0;                      /* Empieza invisible hasta que muevas el ratón. */
  mix-blend-mode:screen;          /* Se mezcla con el fondo, como una luz. */
}
.cursor.is-on{opacity:1}          /* El JS la pone al detectar movimiento. */
.cursor.is-big{width:64px;height:64px;background:rgba(255,95,31,.18)} /* Sobre enlaces. */

/* Una MEDIA QUERY es una condición: "aplica esto solo SI...".
   Aquí: si el aparato no tiene ratón (hover:none, o sea, es táctil) O la
   pantalla es pequeña, escondemos el cursor. En un móvil no hay puntero que
   seguir, así que sobraría. */
@media (hover:none),(max-width:900px){.cursor{display:none}}

/* La línea de progreso de arriba. Empieza con width:0 y el JavaScript le va
   dando el porcentaje de página que llevas leído. */
.scroll-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:120;
  /* Un degradado lineal a 90 grados (de izquierda a derecha). */
  background:linear-gradient(90deg,var(--orange),var(--gold));
  box-shadow:0 0 14px rgba(255,95,31,.7); /* El resplandor de debajo. */
}


/* ===========================================================================
   4. BARRA DE NAVEGACIÓN
   =========================================================================== */

.nav{
  /* fixed = se queda arriba siempre, aunque bajes. */
  position:fixed;top:0;left:0;right:0;z-index:100;
  /* FLEXBOX: coloca a los hijos en fila.
     align-items:center los alinea verticalmente por el centro. */
  display:flex;align-items:center;gap:28px;
  padding:18px clamp(20px,4vw,44px); /* 18px arriba y abajo; los laterales se adaptan. */
  transition:background .4s var(--ease),padding .4s var(--ease),box-shadow .4s;
}
/* El JS añade "is-stuck" en cuanto bajas 40px. Entonces la barra se pone
   semitransparente y encoge un poco. Al principio es invisible para no
   estorbar a la portada. */
.nav.is-stuck{
  background:rgba(8,20,37,.82);
  backdrop-filter:blur(14px);     /* Desenfoca lo que pasa POR DETRÁS. Efecto cristal. */
  padding-block:11px;             /* padding-block = solo arriba y abajo. */
  box-shadow:0 1px 0 var(--line), 0 18px 40px -30px #000;
}

/* margin-right:auto es un truco de flexbox: le dice al logo "quédate con
   todo el espacio sobrante a tu derecha", lo que empuja el menú y el botón
   hasta el extremo contrario. */
.nav__brand{display:flex;align-items:center;gap:11px;text-decoration:none;margin-right:auto}
.nav__logo{width:38px;transition:transform .5s var(--ease)}
/* Al pasar el ratón por la MARCA, gira el LOGO. Se lee: "el .nav__logo que
   esté dentro de un .nav__brand con el ratón encima". */
.nav__brand:hover .nav__logo{transform:rotate(-18deg) scale(1.08)}
.nav__name{
  font-family:"Anton",sans-serif;font-style:italic;font-size:23px;
  color:var(--orange);letter-spacing:.04em;
}

.nav__links{display:flex;gap:30px}
.nav__links a{
  text-decoration:none;font-size:15px;color:var(--muted);
  position:relative;                /* Referencia para el subrayado de abajo. */
  padding:4px 0;
  transition:color .3s;
}
/* ::after inventa una cajita vacía DENTRO del enlace, al final. La usamos
   como subrayado. content:"" es obligatorio: sin él, la caja no existe.
   Empieza con width:0 (invisible) y crece al pasar el ratón. */
.nav__links a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--orange);
  transition:width .35s var(--ease);
}
.nav__links a:hover{color:#fff}
/* Dos casos con el mismo resultado: ratón encima, o sección activa (esa clase
   la pone el JS según por dónde vas leyendo). */
.nav__links a:hover::after,.nav__links a.is-active::after{width:100%}
.nav__links a.is-active{color:#fff}

/* El botón de las tres rayas. display:none = oculto; solo aparece en móvil
   (mira la sección 17, al final del archivo). */
.nav__burger{display:none;background:none;border:0;padding:8px;cursor:pointer}
.nav__burger span{display:block;width:26px;height:2px;background:var(--text);margin:5px 0;transition:.35s var(--ease)}
/* Aquí el selector mira un ATRIBUTO: "cuando aria-expanded valga true".
   Como el JS cambia ese atributo al abrir el menú, el CSS se entera solo.
   nth-child(1) es la primera rayita, (2) la de en medio, (3) la última.
   El resultado: la de arriba baja y gira 45°, la de en medio desaparece y la
   de abajo sube y gira al revés → se forma una X. */
.nav__burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}


/* ===========================================================================
   5. BOTONES
   ===========================================================================
   Sistema de clases combinables: .btn da la forma, y las que llevan doble
   guion (.btn--primary, .btn--ghost) son las "variantes" de color. Así, para
   crear un botón verde mañana, solo escribes .btn--verde con dos líneas.
   Esa forma de nombrar (bloque__elemento--variante) se llama BEM y se usa en
   toda esta hoja: .play__marker es el marcador de una jugada, .btn--sm es la
   variante pequeña del botón. */

.btn{
  /* Una variable local: solo existe dentro de .btn y sus variantes la pisan. */
  --pad:16px 34px;
  display:inline-flex;align-items:center;gap:10px;
  padding:var(--pad);border-radius:14px;text-decoration:none;
  font-weight:700;font-size:16px;letter-spacing:.03em;text-transform:uppercase;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s,color .3s;
  position:relative;
  overflow:hidden;      /* Recorta el destello para que no se salga. */
  will-change:transform;/* Aviso al navegador: "esto se va a mover, prepárate". */
}
.btn--sm{--pad:11px 22px;font-size:14px}
.btn--primary{background:var(--orange);color:var(--orange-deep);box-shadow:0 10px 30px -10px rgba(255,95,31,.9)}
/* EL DESTELLO. Una franja blanca en diagonal, aparcada fuera del botón por la
   izquierda (-120%). Al pasar el ratón cruza hasta el otro lado (+120%) y
   parece un brillo recorriendo el botón. */
.btn--primary::before{
  content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.55),transparent 70%);
  transform:translateX(-120%);transition:transform .7s var(--ease);
}
.btn--primary:hover::before{transform:translateX(120%)}
/* translateY(-3px) = súbelo 3 píxeles. Con la sombra creciendo a la vez,
   parece que el botón se levanta hacia ti. */
.btn--primary:hover{transform:translateY(-3px);box-shadow:0 18px 44px -12px rgba(255,95,31,1)}

/* El botón "fantasma": sin relleno, solo borde. */
.btn--ghost{border:1.5px solid rgba(255,138,76,.55);color:var(--text)}
.btn--ghost:hover{background:rgba(255,95,31,.12);border-color:var(--orange);transform:translateY(-3px)}

/* EL TRIÁNGULO DE PLAY, dibujado sin imágenes.
   El truco: una caja de 0x0 píxeles a la que le pones bordes gordos. Los
   bordes de una caja se cortan en diagonal donde se encuentran, así que si
   pintas uno de naranja y dejas los otros transparentes, lo único que se ve
   es un triángulo. Es un clásico del CSS. */
.btn__play{
  width:0;height:0;border-left:11px solid var(--orange);
  border-top:7px solid transparent;border-bottom:7px solid transparent;
}


/* ===========================================================================
   6. PORTADA (HERO)
   =========================================================================== */

.hero{
  position:relative;              /* Referencia para el vídeo y las líneas. */
  /* svh = "small viewport height". Es el alto de pantalla del móvil CONTANDO
     con que la barra del navegador esté visible. Si usaras vh normal, en
     móvil la portada quedaría cortada por debajo. */
  min-height:100svh;
  display:flex;align-items:center; /* Centra el texto verticalmente. */
  padding:112px 0 104px;
  overflow:hidden;                 /* Recorta el vídeo ampliado. */
}

/* La capa del vídeo ocupa toda la portada y se queda al fondo (z-index:0). */
.hero__media{position:absolute;inset:0;z-index:0}
.hero__video{
  width:100%;height:100%;
  /* object-fit:cover = "rellena el hueco aunque tengas que recortar", igual
     que una foto de portada de Facebook. Sin esto el vídeo saldría deformado. */
  object-fit:cover;
  filter:saturate(1.05) contrast(1.05); /* Un puntito más de color y contraste. */
  transform:scale(1.08);
  animation:kenburns 26s ease-in-out infinite alternate;
}
/* Efecto "Ken Burns": un zoom lentísimo, tan lento que no lo ves moverse pero
   hace que la imagen nunca parezca congelada.
   "alternate" = al terminar, hazla al revés en vez de saltar al principio. */
@keyframes kenburns{from{transform:scale(1.08)}to{transform:scale(1.2)}}

/* EL VELO OSCURO. Sin él, el texto blanco se perdería sobre las partes claras
   del vídeo. Lleva dos degradados superpuestos (se separan con una coma; el
   primero de la lista va encima):
     · radial-gradient  → un óvalo que oscurece más los bordes que el centro
     · linear-gradient  → oscurece arriba y abajo, y deja el medio más claro */
.hero__scrim{
  position:absolute;inset:0;
  background:
    radial-gradient(90% 70% at 22% 45%, rgba(8,20,37,.6), rgba(8,20,37,.94) 70%),
    linear-gradient(180deg, rgba(8,20,37,.9) 0%, rgba(8,20,37,.45) 35%, rgba(8,20,37,.96) 100%);
}

/* GRANO DE PELÍCULA. Es un degradado radial de 1px repetido cada 3px: o sea,
   un puntito blanco casi invisible cada 3 píxeles, en toda la pantalla.
   Le quita ese aspecto "demasiado limpio" de lo digital. */
.hero__grain{
  position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:3px 3px;mix-blend-mode:overlay;
}

/* Las líneas de la cancha (el SVG del HTML) van sobre el vídeo pero bajo el
   texto: z-index 1, entre el 0 del vídeo y el 2 del texto. */
.hero__court{
  position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:.16;pointer-events:none;
  animation:courtdrift 18s ease-in-out infinite alternate;
}
@keyframes courtdrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-2%,-2%,0) scale(1.06)}}

/* ---- EL TRUCO DE LAS LÍNEAS QUE SE DIBUJAN SOLAS ----
   Es de los efectos más bonitos y más fáciles del CSS:
     1. stroke-dasharray:2400 convierte la línea en una línea DISCONTINUA con
        guiones de 2400px, o sea, un guion larguísimo y un hueco larguísimo.
     2. stroke-dashoffset:2400 desplaza ese patrón 2400px, así que lo que se
        ve en pantalla es justo el HUECO: la línea parece no existir.
     3. La animación lleva el desplazamiento a 0, y el guion va entrando poco
        a poco. Parece que un rotulador la está trazando.
   El "*" significa "todas las formas de dentro" (círculos, líneas, etc.). */
.court-lines *{fill:none;stroke:var(--orange);stroke-width:2;
  stroke-dasharray:2400;stroke-dashoffset:2400;animation:draw 3.4s var(--ease) forwards}
/* Cada forma arranca 0,15 s después que la anterior, para que se dibujen en
   cadena y no todas a la vez. */
.court-lines *:nth-child(2){animation-delay:.15s}
.court-lines *:nth-child(3){animation-delay:.3s}
.court-lines *:nth-child(4){animation-delay:.45s}
.court-lines *:nth-child(5){animation-delay:.6s}
.court-lines *:nth-child(6){animation-delay:.75s}
.court-lines *:nth-child(7){animation-delay:.9s}
@keyframes draw{to{stroke-dashoffset:0}}

/* El bloque de texto, por encima de todas las capas (z-index:2). */
.hero__inner{position:relative;z-index:2;width:min(var(--wrap),100% - 40px);margin-inline:auto}

/* La etiquetita de arriba ("La comunidad del baloncesto callejero").
   border-radius:99px es la forma vaga y perfecta de decir "redondéalo del
   todo": como es más grande que la mitad de la altura, sale una cápsula. */
.hero__eyebrow{
  display:inline-flex;align-items:center;gap:10px;margin:0 0 22px;
  padding:8px 18px;border:1px solid rgba(255,138,76,.4);border-radius:99px;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-soft);
  background:rgba(255,95,31,.07);backdrop-filter:blur(6px);
}
.hero__eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--orange);animation:pulse 1.8s infinite}
/* El latido del puntito: una sombra de 0px que se expande hasta 12px mientras
   se vuelve transparente. Da la sensación de "señal en directo". */
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,95,31,.8)}
  70%{box-shadow:0 0 0 12px rgba(255,95,31,0)}
  100%{box-shadow:0 0 0 0 rgba(255,95,31,0)}
}

/* EL TITULAR. 9.4vw significa "9,4% del ancho de la ventana", así que crece y
   encoge con la pantalla; el clamp evita que se pase por arriba o por abajo. */
.hero__title{
  font-size:clamp(48px,9.4vw,124px);font-style:italic;line-height:.92;
  margin:0 0 10px;text-transform:uppercase;
}
/* Cada línea es una "ventana" con overflow:hidden. Las palabras empiezan
   colocadas más abajo, fuera de esa ventana, así que no se ven; al animarse
   suben y aparecen, como si asomaran por detrás de una rendija.
   El padding-bottom y el margin-bottom negativo se compensan: dan aire para
   que las tildes y los rabitos no se corten, sin separar las dos líneas. */
.hero__title .line{display:block;overflow:hidden;padding-bottom:.18em;margin-bottom:-.1em}
.hero__title .word{
  display:inline-block;             /* Necesario: a un texto "en línea" no se le puede aplicar transform. */
  transform:translateY(110%) rotate(4deg); /* Posición de partida: abajo y torcida. */
  opacity:0;
  animation:wordUp .95s var(--ease) forwards;
  text-shadow:0 12px 40px rgba(0,0,0,.55);
}
/* Retraso creciente palabra por palabra: 0,15s / 0,25s / 0,35s / 0,45s.
   Ese escalonado es lo que hace que el titular "se monte" en cascada. */
.hero__title .word:nth-child(1){animation-delay:.15s}
.hero__title .word:nth-child(2){animation-delay:.25s}
.hero__title .line:nth-child(2) .word:nth-child(1){animation-delay:.35s}
.hero__title .line:nth-child(2) .word:nth-child(2){animation-delay:.45s}
.hero__title .accent{
  color:var(--orange);
  text-shadow:0 0 46px rgba(255,95,31,.5), 0 14px 44px rgba(0,0,0,.55);
}
@keyframes wordUp{to{transform:translateY(0) rotate(0);opacity:1}}

/* letter-spacing muy alto + mayúsculas = ese aire de rótulo deportivo. */
.hero__tagline{
  font-style:italic;color:var(--muted);letter-spacing:.28em;text-transform:uppercase;
  font-size:13px;margin:0 0 20px;
}
/* 52ch = "el ancho de 52 caracteres". Es la unidad ideal para limitar el
   ancho de un párrafo: entre 45 y 75 caracteres por línea es lo más cómodo
   de leer según los estudios de tipografía. */
.hero__lead{max-width:52ch;color:var(--muted);font-size:clamp(16px,1.5vw,19px);margin:0 0 26px}
/* flex-wrap:wrap = si no caben en una fila, que salten a la siguiente. Es lo
   que hace que en móvil los botones se apilen solos. */
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:24px}
/* list-style:none quita los puntitos de la lista; padding:0 quita la sangría
   que los navegadores le meten a los <ul> por defecto. */
.hero__chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.hero__chips li{
  padding:8px 16px;border-radius:99px;font-size:13.5px;color:var(--muted);
  background:rgba(255,255,255,.05);border:1px solid var(--line);backdrop-filter:blur(4px);
  transition:.3s var(--ease);
}
.hero__chips li:hover{color:#fff;border-color:var(--orange);transform:translateY(-2px)}

/* El indicador "SCROLL" de la esquina inferior derecha. */
.hero__scroll{
  position:absolute;right:clamp(20px,4vw,44px);bottom:54px;z-index:3;
  display:grid;justify-items:center;gap:8px;text-decoration:none;color:var(--muted);
  animation:floaty 2.4s ease-in-out infinite;
}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}
/* El dibujo de un ratón: un rectángulo muy redondeado con una rayita dentro. */
.hero__mouse{width:24px;height:38px;border:2px solid rgba(190,198,224,.5);border-radius:14px;display:grid;justify-items:center;padding-top:6px}
.hero__mouse i{width:3px;height:7px;background:var(--orange);border-radius:2px;animation:wheel 1.6s infinite}
/* La ruedita: aparece arriba, baja 12px y se desvanece. */
@keyframes wheel{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(12px)}}
.hero__scrolltext{font-size:10px;letter-spacing:.3em}


/* ===========================================================================
   7. CINTA NARANJA (MARQUEE)
   =========================================================================== */

.marquee{
  background:var(--orange);color:var(--orange-deep);
  padding:16px 0;
  overflow:hidden;                  /* Recorta el texto que sobresale por los lados. */
  transform:rotate(-1.4deg) scale(1.04); /* Girada; el scale evita que se vean las esquinas. */
  /* margin-block:-30px 40px = -30px arriba, 40px abajo. El margen negativo la
     hace "morder" la portada y solaparse con ella. */
  margin-block:-30px 40px;
  position:relative;z-index:4;box-shadow:var(--shadow);
}
/* width:max-content = "sé tan ancho como haga falta para tu contenido", que
   aquí es el texto duplicado, o sea, el doble del ancho de una copia. */
.marquee__track{display:flex;width:max-content;animation:slide 28s linear infinite}
/* Detalle simpático: al pasar el ratón, la cinta se para. */
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee span{
  font-family:"Anton",sans-serif;font-style:italic;font-size:clamp(20px,3vw,34px);
  text-transform:uppercase;
  white-space:nowrap;               /* Prohíbe partir el texto en varias líneas. */
  padding-right:30px;
}
.marquee b{color:#fff}
/* El desplazamiento es del -50% EXACTO. Como el contenido está duplicado, al
   llegar al 50% la segunda copia está justo donde estaba la primera, así que
   al reiniciarse el bucle no se nota ningún salto. Y "linear" es obligatorio:
   con cualquier otra curva, la cinta frenaría y aceleraría en cada vuelta. */
@keyframes slide{to{transform:translateX(-50%)}}


/* ===========================================================================
   8. ENCABEZADOS DE SECCIÓN
   =========================================================================== */

.shead{text-align:center;margin-bottom:clamp(46px,6vw,76px)}
.shead--left{text-align:left;margin-bottom:34px}  /* La variante alineada a la izquierda. */
.shead__kicker{
  font-size:12.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--orange);
  margin:0 0 14px;
}
/* line-height:1.04 (algo más de 1) da el aire justo para que la tilde de
   "ESTÁ" no choque con la línea de arriba. Con .92 se solapaban. */
.shead__title{
  font-size:clamp(34px,5.6vw,72px);font-style:italic;text-transform:uppercase;line-height:1.04;
}


/* ===========================================================================
   9. LA JUGADA (las seis funciones)
   ===========================================================================
   Esta sección imita la pizarra de un entrenador: una línea discontinua que
   baja por el centro y, en cada parada, una función. Las paradas alternan
   lado y van apareciendo según bajas.

   Por qué NO es una rejilla de tarjetas: la caja redondeada con borde,
   sombra y un emoji dentro se ha convertido en el aspecto por defecto de
   media internet, y se reconoce al instante como plantilla. Una rejilla
   tampoco tiene recorrido: lo ves todo de golpe y no pasa nada más. Una
   línea que se traza mientras bajas te lleva de la mano por las seis.

   La sección se monta en tres capas superpuestas:
     ::before   → la línea discontinua gris (el camino todavía sin recorrer)
     ::after    → la línea naranja que lo va tapando (el camino recorrido)
     .play__ball→ el balón en la punta de esa línea naranja
   Las tres dependen de la variable --p, que va de 0 a 1 según tu scroll y
   la escribe el JavaScript (sección 3 de script.js). */

.play{position:relative;display:grid;gap:clamp(30px,4.5vw,58px)}

/* LA LÍNEA DISCONTINUA. Es un borde punteado de 2px sobre un elemento sin
   ancho: el truco más corto para dibujar una línea vertical de puntos.
   left:50% lo lleva al centro y translateX(-50%) lo recoloca sobre su propio
   eje, porque si no empezaría EN el centro en vez de estar centrado. */
.play::before{
  content:"";position:absolute;left:50%;top:0;bottom:0;
  border-left:2px dashed rgba(190,198,224,.2);
  transform:translateX(-50%);
  /* Una MÁSCARA desvanece los dos extremos de la línea. Funciona como un
     recorte con degradado: donde el degradado es negro se ve, y donde es
     transparente se borra. Sin esto, la línea se corta de golpe por arriba y
     por abajo, justo por encima del primer marcador y por debajo del último,
     y se nota mucho que le sobra un trozo. Con la máscara se esfuma. */
  -webkit-mask-image:linear-gradient(transparent, #000 7%, #000 93%, transparent);
  mask-image:linear-gradient(transparent, #000 7%, #000 93%, transparent);
}
/* LA LÍNEA NARANJA QUE SE TRAZA. Va justo encima de la anterior y su altura
   es un porcentaje del recorrido: calc(100% * 0.4) = el 40% de la sección.
   Esa cifra es --p, y la va cambiando el JavaScript mientras haces scroll. */
.play::after{
  content:"";position:absolute;left:50%;top:0;width:2px;
  height:calc(100% * var(--p,0));
  background:linear-gradient(var(--orange),#ff9a5e);
  box-shadow:0 0 16px rgba(255,95,31,.75);
  transform:translateX(-50%);
}

/* EL BALÓN. Viaja en la punta de la línea naranja porque usa la MISMA
   variable para calcular su posición vertical. Las dos rayas de dentro
   (::before y ::after) son las costuras del balón: una vertical y otra
   curvada, hechas con bordes redondeados. */
.play__ball{
  position:absolute;left:50%;top:calc(100% * var(--p,0));
  width:20px;height:20px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%, #FF9A5E, var(--orange) 70%);
  transform:translate(-50%,-50%);z-index:1;   /* Por debajo de los marcadores (z-index 2): así el balón se mete detrás de cada parada al pasar, en vez de taparle el icono. */
  box-shadow:0 0 22px 5px rgba(255,95,31,.5);
}
.play__ball::before,.play__ball::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1.3px solid rgba(57,12,0,.65);
}
.play__ball::before{border-left-color:transparent;border-right-color:transparent}
.play__ball::after{transform:scaleX(.42)}

/* ---- CADA PARADA ----
   Tres columnas: el texto a un lado, el marcador en el centro y hueco al
   otro lado. Luego, según sea parada impar o par, el texto salta de la
   primera columna a la tercera. */
/* EL ORDEN DE LAS CAPAS, que aquí importa y da guerra.
   Tres cosas se superponen en el mismo sitio: las líneas, el balón y las
   paradas. Sin poner orden, el navegador pinta las líneas y el balón ENCIMA
   de los marcadores, y se ve la raya naranja cruzando por mitad de los
   iconos. El reparto que queremos, de atrás hacia delante, es:
     0 → las dos líneas (los ::before y ::after de .play)
     1 → el balón
     2 → las paradas, que así tapan a los dos anteriores
   Para que un z-index funcione, el elemento tiene que estar posicionado:
   por eso va el position:relative, que si no la cifra se ignora. */
.play__step{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:clamp(18px,3vw,44px);
}
/* :nth-of-type cuenta SOLO los <article>, así que el <span> del balón no
   descoloca la numeración. Con :nth-child sí lo haría: contaría el balón
   como hijo número 1 y todas las paradas irían cambiadas de lado.

   ¡OJO CON EL grid-row:1! No es decorativo, arregla un fallo real y muy
   típico. En el HTML el marcador va ANTES que el texto, pero en las paradas
   impares el texto tiene que salir a su izquierda (columna 1). Cuando el
   navegador coloca las cosas solo, va avanzando como quien lee: si ya ha
   puesto algo en la columna 2, dar marcha atrás a la columna 1 le obliga a
   bajar a una fila nueva. Resultado: el texto se iba debajo del marcador y
   las paradas quedaban a distinta altura unas de otras.
   Diciéndole a los dos "estáis en la fila 1", el problema desaparece. */
.play__step:nth-of-type(odd) .play__body{grid-column:1;grid-row:1;text-align:right;justify-self:end}
.play__step:nth-of-type(even) .play__body{grid-column:3;grid-row:1;text-align:left;justify-self:start}
.play__marker{grid-column:2;grid-row:1}

/* EL MARCADOR REDONDO. Lleva el fondo de la página a propósito: así tapa la
   línea discontinua que pasa por detrás y parece que está ensartado en ella. */
.play__marker{
  position:relative;z-index:2;
  width:clamp(58px,6vw,74px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;
  background:var(--navy);border:2px solid rgba(190,198,224,.25);
  transition:border-color .5s var(--ease),box-shadow .5s var(--ease),transform .6s var(--ease) .15s,opacity .5s .15s;
  /* Arranca encogido y aparece de golpe cuando la parada entra en pantalla. */
  transform:scale(.55);opacity:0;
}
.play__step.is-in .play__marker{transform:scale(1);opacity:1}
.play__step.is-in .play__marker{border-color:rgba(255,95,31,.55);box-shadow:0 0 0 6px rgba(255,95,31,.07)}
.play__step:hover .play__marker{border-color:var(--orange);box-shadow:0 0 26px rgba(255,95,31,.45)}

/* Los iconos van sin caja ni fondo: solo el trazo.
   fill:none + stroke = dibujo de líneas, no silueta maciza.
   stroke-linecap/linejoin redondean puntas y esquinas, que es lo que hace
   que un icono parezca dibujado por un diseñador y no por una máquina. */
.play__marker svg{
  width:46%;height:46%;
  fill:none;stroke:var(--orange);stroke-width:1.5;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .5s var(--ease);
}
.play__step:hover .play__marker svg{transform:scale(1.12)}

.play__body{max-width:38ch}
.play__body h3{font-size:clamp(22px,2.4vw,30px);font-style:italic;text-transform:uppercase;margin-bottom:10px}
.play__body p{color:var(--muted);font-size:15.5px;margin:0}
.play__body b{color:var(--orange-soft)}


/* ===========================================================================
   10. RECORRIDO CON EL MÓVIL PEGADO
   =========================================================================== */

.showcase{padding:clamp(60px,8vw,110px) 0 clamp(80px,10vw,140px);position:relative}
/* Un halo naranja de fondo, creado con ::before para no ensuciar el HTML con
   un div decorativo más. */
.showcase::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 40% at 80% 20%, rgba(255,95,31,.10), transparent 70%);
}

/* GRID CON ÁREAS CON NOMBRE. En vez de decir "esto va en la columna 2 fila 1",
   dibujas el plano con palabras:

       "head  phone"     ← fila 1: título arriba a la izquierda, móvil a la derecha
       "steps phone"     ← fila 2: los pasos debajo del título

   Como "phone" aparece en las dos filas, el móvil ocupa las dos de alto. Y
   para reordenarlo todo en móvil basta con redibujar el plano (sección 17).
   Las columnas son 1fr y .85fr: "fr" es una fracción del espacio libre, así
   que la de los pasos es un poco más ancha que la del móvil. */
.showcase__wrap{
  display:grid;grid-template-columns:1fr .85fr;column-gap:60px;align-items:start;position:relative;
  grid-template-areas:"head phone" "steps phone";
}
/* Y aquí cada bloque dice en qué casilla del plano se coloca. */
.showcase__head{grid-area:head}
.showcase__steps{grid-area:steps}
.showcase__sticky{grid-area:phone}

.showcase__steps{display:grid;gap:0}
/* Los pasos empiezan apagados (opacidad 0,32) y desplazados. El JS le pone la
   clase is-active al que estés leyendo, y ese se enciende del todo. */
.step{
  padding:46px 0;border-top:1px solid var(--line);
  opacity:.32;transition:opacity .5s var(--ease),transform .5s var(--ease);
  transform:translateX(-8px);
}
.step.is-active{opacity:1;transform:translateX(0)}
.step__num{
  font-family:"Anton",sans-serif;font-style:italic;font-size:14px;letter-spacing:.2em;
  color:var(--orange);display:block;margin-bottom:10px;
}
.step h3{font-size:clamp(26px,3.4vw,40px);font-style:italic;text-transform:uppercase;margin-bottom:12px}
.step.is-active h3{color:#fff}
.step p{color:var(--muted);max-width:46ch;margin:0;font-size:16px}

/* ---- LA COLUMNA PEGAJOSA ----
   position:sticky + top:0 = "compórtate normal hasta que tu borde superior
   llegue a la parte de arriba de la pantalla; a partir de ahí quédate ahí
   clavado mientras quede sección por recorrer".
   El alto de 100svh (una pantalla entera) más place-items:center es lo que
   mantiene el móvil centrado verticalmente mientras haces scroll. */
.showcase__sticky{position:sticky;top:0;height:100svh;display:grid;place-items:center;padding-top:46px}

.phone{position:relative;display:grid;justify-items:center;gap:20px}
/* El halo que "respira" detrás del teléfono. aspect-ratio:1 lo obliga a ser
   cuadrado (y con border-radius:50%, un círculo); blur(20px) lo difumina. */
.phone__glow{
  position:absolute;width:130%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle, rgba(255,95,31,.28), transparent 62%);
  filter:blur(20px);animation:breathe 5s ease-in-out infinite;
}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.12);opacity:1}}

/* LA CARCASA DEL MÓVIL, dibujada entera con CSS: no hay ninguna foto.
   aspect-ratio:9/19.2 son las proporciones reales de un móvil moderno, así
   que solo hay que darle el ancho y el alto sale solo.
   El degradado en diagonal (160deg) imita el reflejo del metal, y la sombra
   "inset" del final es una luz interior que hace de canto brillante. */
.phone__frame{
  position:relative;width:min(300px,72vw);aspect-ratio:9/19.2;
  border-radius:42px;padding:11px;background:linear-gradient(160deg,#2A3B57,#0A1524 55%,#22344F);
  box-shadow:var(--shadow), 0 0 0 1px rgba(255,255,255,.07) inset;
  transition:transform .4s var(--ease);
}
/* La muesca de la cámara: solo redondeada por abajo (0 0 16px 16px). */
.phone__notch{
  position:absolute;top:11px;left:50%;transform:translateX(-50%);
  width:110px;height:22px;background:#050D18;border-radius:0 0 16px 16px;z-index:3;
}
.phone__screen{
  position:relative;width:100%;height:100%;border-radius:32px;overflow:hidden;background:var(--navy);
}
/* Las seis capturas están apiladas en el mismo sitio (position:absolute e
   inset:0). Todas invisibles y un poco ampliadas... */
.shot{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transform:scale(1.06);transition:opacity .6s var(--ease),transform .8s var(--ease);
}
/* ...menos la activa, que se ve y vuelve a su tamaño normal. Como hay
   transition, el cambio es un fundido con un zoom suave. */
.shot.is-active{opacity:1;transform:scale(1)}

.phone__dots{display:flex;gap:8px}
.phone__dots i{
  width:7px;height:7px;border-radius:50%;background:rgba(190,198,224,.3);
  transition:.4s var(--ease);cursor:pointer;
}
/* El punto activo no solo cambia de color: se estira hasta 26px y se convierte
   en una pastillita. Ese pequeño gesto se nota mucho. */
.phone__dots i.is-active{background:var(--orange);width:26px;border-radius:99px}


/* ===========================================================================
   11. REPRODUCTOR DEL TRAILER
   =========================================================================== */

.trailer{background:linear-gradient(180deg,transparent,rgba(255,95,31,.05),transparent)}
.player{
  position:relative;border-radius:26px;overflow:hidden;
  background:#040A13;border:1px solid var(--line);
  box-shadow:var(--shadow), 0 0 90px -40px rgba(255,95,31,.8);
  aspect-ratio:16/9;               /* Formato de vídeo panorámico. */
}
/* contain (no cover) = "que se vea el vídeo ENTERO aunque queden franjas".
   En un trailer con texto en pantalla, recortar sería imperdonable. */
.player video{width:100%;height:100%;object-fit:contain;background:#040A13;display:block}
/* El JS añade is-playing al darle al play: el resplandor naranja crece. */
.player.is-playing{box-shadow:var(--shadow), 0 0 130px -30px rgba(255,95,31,.9)}

.player__overlay{
  position:absolute;inset:0;border:0;cursor:pointer;color:var(--text);
  display:grid;place-content:center;justify-items:center;gap:18px;
  background:radial-gradient(circle at 50% 50%, rgba(8,20,37,.4), rgba(8,20,37,.82));
  backdrop-filter:blur(2px);transition:opacity .5s var(--ease),visibility .5s;
  font-family:inherit;             /* Los <button> no heredan la fuente; hay que pedírselo. */
}
/* Se oculta con opacity Y visibility a la vez, y esto tiene su motivo: con
   opacity:0 a secas, la capa seguiría ahí y te robaría los clics del vídeo.
   visibility:hidden la aparta de verdad, pero deja que la transición se vea. */
.player__overlay.is-hidden{opacity:0;visibility:hidden}

.player__ring{
  width:96px;height:96px;border-radius:50%;display:grid;place-items:center;
  background:var(--orange);position:relative;
  box-shadow:0 0 0 0 rgba(255,95,31,.6);animation:ripple 2.4s infinite;
  transition:transform .4s var(--ease);
}
/* LAS ONDAS EXPANSIVAS. Dos sombras que empiezan pegadas al círculo y se
   expanden hasta 34 y 60px mientras se vuelven transparentes. Como salen a la
   vez pero de distinto tamaño, parecen dos ondas persiguiéndose. */
@keyframes ripple{
  0%{box-shadow:0 0 0 0 rgba(255,95,31,.55), 0 0 0 0 rgba(255,95,31,.35)}
  100%{box-shadow:0 0 0 34px rgba(255,95,31,0), 0 0 0 60px rgba(255,95,31,0)}
}
.player__overlay:hover .player__ring{transform:scale(1.1)}
/* Otro triángulo con el truco de los bordes, aquí más grande.
   El margin-left:6px lo compensa: un triángulo centrado matemáticamente
   parece descentrado a la vista, así que se empuja un poco a la derecha. */
.player__triangle{
  width:0;height:0;margin-left:6px;
  border-left:26px solid var(--orange-deep);
  border-top:16px solid transparent;border-bottom:16px solid transparent;
}
.player__label{
  font-size:12.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);
}
/* La barra de progreso, pegada al fondo del reproductor. El <i> de dentro es
   la parte de color, y su anchura la va escribiendo el JS. */
.player__bar{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.12)}
.player__bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--orange),var(--gold))}

/* LAS ESQUINAS DE VISOR DE CÁMARA. Son cuatro cuadrados con borde completo a
   los que se les quitan dos lados (border-right:0, etc.), dejando solo la
   escuadra. Cada variante quita los dos lados que miran hacia dentro. */
.player__corner{
  position:absolute;width:26px;height:26px;border:2px solid var(--orange);opacity:.75;pointer-events:none;
}
.player__corner--tl{top:14px;left:14px;border-right:0;border-bottom:0}   /* arriba-izquierda */
.player__corner--tr{top:14px;right:14px;border-left:0;border-bottom:0}   /* arriba-derecha */
.player__corner--bl{bottom:14px;left:14px;border-right:0;border-top:0}   /* abajo-izquierda */
.player__corner--br{bottom:14px;right:14px;border-left:0;border-top:0}   /* abajo-derecha */


/* ===========================================================================
   12. RANKING Y RANGOS
   =========================================================================== */

/* Dos columnas iguales: texto a la izquierda, rangos a la derecha. */
.ranks__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,70px);align-items:center}
.ranks__lead{color:var(--muted);max-width:48ch}

.xp{margin:34px 0 28px}
/* justify-content:space-between separa a los dos hijos hasta los extremos:
   la etiqueta a la izquierda y los puntos a la derecha.
   align-items:baseline los alinea por la línea del renglón, no por la caja,
   que es lo correcto cuando mezclas letras de distinto tamaño. */
.xp__row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:10px}
.xp__lbl{font-family:"Anton",sans-serif;font-style:italic;letter-spacing:.05em;font-size:17px}
.xp__val{color:var(--muted);font-size:14px}
.xp__val b{color:var(--orange);font-size:20px}

.xp__bar{height:12px;border-radius:99px;background:rgba(190,198,224,.16);overflow:hidden}
/* Empieza a 0 de ancho. Cuando el JS le pone width:65%, la transición de 1,6
   segundos hace que la barra se rellene sola ante tus ojos. */
.xp__bar i{
  display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--orange),#ff9a5e);
  box-shadow:0 0 18px rgba(255,95,31,.7);
  transition:width 1.6s var(--ease);
}

.ranks__list{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.ranks__list li{
  color:var(--muted);font-size:15.5px;padding-left:26px;position:relative;
}
/* Quitamos los puntos de fábrica y ponemos los nuestros con ::before: un
   círculo naranja con resplandor. Así podemos darle el color y el brillo que
   queramos, cosa que con las viñetas normales no se puede. */
.ranks__list li::before{
  content:"";position:absolute;left:0;top:.62em;width:10px;height:10px;border-radius:50%;
  background:var(--orange);box-shadow:0 0 12px rgba(255,95,31,.8);
}
.ranks__list b{color:#fff}

.ranks__tiers{display:grid;gap:14px}
/* Aquí se ve para qué servía el style="--tier:#CD7F32" del HTML: esa variable
   se usa CUATRO veces en este bloque (fondo, borde, medalla y título), así
   que con un solo color en el HTML se tiñe la tarjeta entera.
   color-mix() mezcla dos colores: "12% del color del rango + el resto del
   color de tarjeta". Es lo que da ese tinte suave distinto en cada una. */
.tier{
  display:flex;align-items:center;gap:18px;padding:20px 24px;border-radius:18px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--tier) 12%, var(--card)), var(--card));
  border:1px solid var(--line);border-left:4px solid var(--tier);
  transition:transform .45s var(--ease),box-shadow .45s;
}
.tier:hover{transform:translateX(10px);box-shadow:-8px 18px 40px -24px var(--tier)}
.tier__medal{font-size:30px;filter:drop-shadow(0 0 12px color-mix(in srgb,var(--tier) 60%, transparent))}
.tier h3{font-size:21px;font-style:italic;color:var(--tier);letter-spacing:.06em;margin-bottom:4px}
.tier p{margin:0;color:var(--muted);font-size:14.5px}


/* ===========================================================================
   13. REDES SOCIALES
   ===========================================================================
   Las redes aparecen en tres sitios, y no es repetición gratuita: cada uno
   atrapa a un tipo de visitante distinto.
     · .rail   → la barra lateral fija: acompaña durante toda la página.
     · .social → la sección propia: para quien va leyendo de arriba abajo.
     · el pie  → el sitio donde todo el mundo las busca por costumbre.
   Los tres reutilizan los mismos iconos del sprite del HTML. */

/* El sprite es solo un almacén de dibujos, nunca se ve. */
.sprite{display:none}

/* ---- LA BARRA LATERAL FIJA ----
   position:fixed la clava en el borde izquierdo de la pantalla.
   z-index:90 la deja por debajo de la barra de navegación (100) para que no
   se monte encima del menú de móvil. */
.rail{
  position:fixed;left:20px;bottom:0;z-index:90;
  display:grid;justify-items:center;gap:18px;
}
/* El texto vertical. writing-mode gira el renglón 90 grados, y como el
   resultado se lee de arriba abajo, rotate(180deg) lo endereza para que se
   lea de abajo arriba, que es como se hacen estos rótulos laterales. */
.rail__txt{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);
  margin-bottom:6px;
}
.rail a{
  display:grid;place-items:center;width:34px;height:34px;border-radius:10px;
  color:var(--muted);transition:.35s var(--ease);
}
.rail a svg{width:18px;height:18px}
.rail a:hover{color:var(--orange);background:rgba(255,95,31,.12);transform:translateY(-3px)}
/* La rayita vertical que remata la barra por abajo. */
.rail__line{width:1px;height:72px;background:linear-gradient(var(--line),transparent)}

/* ---- LA SECCIÓN ---- */
.social{position:relative;overflow:hidden}
/* Un halo naranja detrás, para que la sección "encienda" al llegar a ella. */
.social::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 50% at 50% 0%, rgba(255,95,31,.14), transparent 70%);
}
.social .wrap{position:relative}   /* Para quedar por encima del halo. */
.social__lead{
  text-align:center;color:var(--muted);max-width:54ch;
  margin:-30px auto 44px;          /* Margen negativo: lo acerca al título. */
}

.social__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}

/* CADA TARJETA DE RED.
   Igual que en los rangos del ranking, los colores llegan desde el HTML en
   variables (--brand, --fill, --ink). Este bloque de CSS es uno solo y vale
   para las tres redes, y para cualquier otra que añadas mañana.
   --ink:#fff es el valor por defecto; la tarjeta de X lo cambia a azul
   oscuro porque su relleno es blanco.
   align-content:end empuja el contenido hacia abajo, y el margin-bottom:auto
   del icono lo manda a él arriba del todo: así el logo queda en una esquina
   y el texto en la otra, que es más interesante que todo centrado. */
.snet{
  --ink:#fff;
  position:relative;overflow:hidden;
  display:grid;align-content:end;gap:4px;
  min-height:clamp(210px,24vw,260px);
  padding:26px;border-radius:20px;text-decoration:none;
  background:linear-gradient(180deg,var(--card),#0B1728);
  border:1px solid var(--line);
  transition:transform .45s var(--ease),border-color .4s,box-shadow .45s;
}
/* EL RELLENO QUE SUBE. Una capa del color de la marca aparcada justo debajo
   de la tarjeta (translateY(101%)) que al pasar el ratón sube hasta
   taparla entera. El 101% en vez de 100% evita que se vea una línea de un
   píxel por redondeos del navegador. */
.snet::before{
  content:"";position:absolute;inset:0;background:var(--fill);
  transform:translateY(101%);transition:transform .55s var(--ease);
}
/* Todo lo que hay dentro de la tarjeta tiene que ir POR ENCIMA de esa capa,
   o el relleno taparía el texto. El selector "> *" son los hijos directos. */
.snet > *{position:relative;z-index:1}
.snet:hover{transform:translateY(-6px);border-color:transparent;box-shadow:0 26px 50px -26px var(--brand)}
.snet:hover::before{transform:translateY(0)}

/* El icono va dentro de un círculo de luz de su propio color de marca, hecho
   con un degradado radial. Es lo que hace que la tarjeta ya llame la atención
   ANTES de que pases el ratón: el logo no está simplemente puesto ahí, está
   encendido. color-mix mezcla el color de marca con transparente para sacar
   una versión suave sin tener que escribir un segundo color a mano. */
.snet__icon{
  width:52px;height:52px;margin-bottom:auto;padding:3px;
  color:var(--brand);                /* El icono usa currentColor: se tiñe con esto. */
  filter:drop-shadow(0 0 18px color-mix(in srgb, var(--brand) 45%, transparent));
  transition:color .4s,transform .55s var(--ease),filter .4s;
}
.snet:hover .snet__icon{color:var(--ink);transform:scale(1.08) rotate(-6deg);filter:none}

.snet__name{
  font-family:"Anton",sans-serif;font-style:italic;font-size:27px;
  text-transform:uppercase;letter-spacing:.03em;color:var(--text);
  transition:color .4s;
}
.snet__handle{color:var(--muted);font-size:14.5px;transition:color .4s}
.snet:hover .snet__name,.snet:hover .snet__handle{color:var(--ink)}

/* La llamada "SEGUIR →".
   Siempre está visible, aunque a media luz (opacity .5): una tarjeta que en
   reposo no dice qué va a pasar si la pulsas invita mucho menos. Al pasar el
   ratón se enciende del todo y la flecha se desplaza a la derecha, que es el
   gesto universal de "por aquí se sale". */
.snet__go{
  display:flex;align-items:center;gap:10px;margin-top:16px;
  font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:700;
  color:var(--muted);opacity:.5;
  transition:opacity .4s var(--ease),color .4s;
}
.snet:hover .snet__go{opacity:1;color:var(--ink)}
/* En una pantalla táctil no existe el "pasar el ratón por encima", así que
   el estado de reposo es el único que se ve: conviene subirlo de intensidad.
   Acuérdate de esto cada vez que escondas algo detrás de un :hover. */
@media (hover:none){
  .snet__go{opacity:.85}
}
/* La flecha está dibujada a mano: el <i> es la raya horizontal, y su ::after
   es la punta, que no es más que un cuadrado al que se le quitan dos lados y
   se gira 45 grados. Sin imágenes ni tipografías de iconos. */
.snet__go i{
  width:22px;height:1.5px;background:currentColor;position:relative;
  transition:transform .45s var(--ease);
}
.snet__go i::after{
  content:"";position:absolute;right:0;top:50%;width:7px;height:7px;
  border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;
  transform:translateY(-50%) rotate(45deg);
}
.snet:hover .snet__go i{transform:translateX(6px)}


/* ===========================================================================
   14. PRIVACIDAD
   =========================================================================== */

.privacy{text-align:center}
.privacy__inner{max-width:760px}
/* margin:0 auto 26px = 0 arriba, auto a los lados (lo centra) y 26px abajo. */
.privacy__badge{
  width:84px;height:84px;margin:0 auto 26px;border-radius:24px;display:grid;place-items:center;
  font-size:36px;background:rgba(255,95,31,.1);border:1px solid rgba(255,95,31,.35);
  animation:tilt 6s ease-in-out infinite;
}
/* Un balanceo lentísimo de -6° a +6°. Casi no se nota, y esa es la gracia. */
@keyframes tilt{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
.privacy p{color:var(--muted);margin:22px auto 30px;max-width:60ch}
.privacy__links{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.privacy__links a{
  padding:11px 22px;border-radius:99px;border:1px solid var(--line);
  text-decoration:none;font-size:14.5px;color:var(--muted);transition:.35s var(--ease);
}
.privacy__links a:hover{color:#fff;border-color:var(--orange);background:rgba(255,95,31,.1);transform:translateY(-2px)}


/* ===========================================================================
   15. LLAMADA FINAL A LA ACCIÓN
   =========================================================================== */

.cta{position:relative;padding:clamp(90px,12vw,160px) 0;text-align:center;overflow:hidden}
/* inset:-10% hace que el fondo sea un 10% MÁS GRANDE que su contenedor por
   cada lado; así, al moverse, nunca se ve el borde.
   repeating-linear-gradient dibuja el patrón de rayas diagonales: 2px de raya
   clara y 84px de hueco, repetido hasta el infinito. */
.cta__court{
  position:absolute;inset:-10%;
  background:
    radial-gradient(50% 50% at 50% 50%, rgba(255,95,31,.22), transparent 70%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, transparent 2px 86px);
  animation:ctadrift 22s linear infinite alternate;
}
@keyframes ctadrift{from{transform:translateX(-3%)}to{transform:translateX(3%)}}
/* position:relative (sin más) basta para que el contenido quede POR ENCIMA
   del fondo decorativo, sin tener que inventar z-index. */
.cta__inner{position:relative}
/* Reutilizamos la animación "dribble" del preloader, pero más lenta. Escribir
   las animaciones pensando en reutilizarlas ahorra mucho código. */
.cta__logo{width:96px;margin:0 auto 26px;filter:drop-shadow(0 18px 40px rgba(255,95,31,.6));animation:dribble 2.6s ease-in-out infinite}
/* OJO CON EL INTERLINEADO Y LAS TILDES.
   Anton coloca los acentos de las mayúsculas MUY por encima de la letra, y
   además este titular va en cursiva, así que la tilde se inclina hacia la
   derecha y se mete todavía más en la línea de arriba. Con un line-height
   ajustado, la tilde de "ESTÁ" acababa tocando la "CANCHA" de la línea
   anterior. El 1.16 es el mínimo que las separa del todo.
   Si algún día cambias este texto, comprueba que ninguna línea que empiece
   con vocal acentuada quede pegada a la de encima. */
.cta__title{font-size:clamp(40px,8vw,104px);font-style:italic;text-transform:uppercase;line-height:1.16;max-width:16ch;margin-inline:auto}
.cta p{color:var(--muted);margin:22px 0 36px}
.cta__stores{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* Los botones de las tiendas. Fondo blanco a propósito: es como se ven en
   todas las webs de apps y la gente los reconoce al instante. */
.store{
  display:inline-flex;align-items:center;gap:14px;padding:14px 26px;border-radius:16px;
  background:#fff;color:#081425;text-decoration:none;
  transition:transform .35s var(--ease),box-shadow .35s;will-change:transform;
}
.store:hover{transform:translateY(-4px);box-shadow:0 22px 44px -20px rgba(255,255,255,.5)}
/* La variante "muy pronto": transparente y con cursor normal (no de mano),
   porque no lleva a ninguna parte. Y le anulamos el efecto al pasar el ratón
   para que quede claro que no se puede pulsar. */
.store--soon{background:transparent;color:var(--muted);border:1px solid var(--line);cursor:default}
.store--soon:hover{transform:none;box-shadow:none}
.store__txt{display:grid;text-align:left;line-height:1.2}
.store__txt small{font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.7}
.store__txt b{font-family:"Anton",sans-serif;font-style:italic;font-size:20px;letter-spacing:.03em}
.store__icon{display:grid;place-items:center;width:26px;height:26px}
/* fill:currentColor = "píntate del mismo color que el texto de al lado". Muy
   práctico en SVG: el icono se adapta solo si cambias el color del botón. */
.store__icon svg{width:24px;height:24px;fill:currentColor}
/* Y el triángulo de Google Play, otra vez con el truco de los bordes. */
.store__icon--play{
  width:0;height:0;border-left:20px solid var(--orange);
  border-top:12px solid transparent;border-bottom:12px solid transparent;
}


/* ===========================================================================
   16. PIE DE PÁGINA
   =========================================================================== */

.footer{border-top:1px solid var(--line);padding:56px 0 30px;background:#060F1D}
/* Tres bloques repartidos a lo ancho. En móvil, flex-wrap hace que se apilen. */
.footer__inner{display:flex;flex-wrap:wrap;gap:34px;justify-content:space-between;align-items:flex-start}
.footer__brandrow{display:flex;align-items:center;gap:11px}
.footer__brandrow img{width:36px}
.footer__brandrow span{font-family:"Anton",sans-serif;font-style:italic;font-size:22px;color:var(--orange)}
.footer__brand p{margin:8px 0 0;color:var(--muted);font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-style:italic}
/* La coma agrupa dos selectores que comparten estilos: menos código repetido. */
.footer__nav,.footer__social{display:flex;flex-wrap:wrap;gap:20px}
.footer__nav a,.footer__social a{text-decoration:none;color:var(--muted);font-size:15px;transition:color .3s}
.footer__nav a:hover,.footer__social a:hover{color:var(--orange)}
/* Las redes del pie van en columna (una debajo de otra) porque ahora llevan
   el nombre de usuario al lado del icono y en fila ocuparían demasiado. */
.footer__social{flex-direction:column;gap:12px}
.footer__social a{display:flex;align-items:center;gap:10px}
.footer__social svg{width:17px;height:17px;flex:0 0 auto}  /* flex:0 0 auto = que no se encoja. */
.footer__legal{text-align:center;color:#6E7A96;font-size:13px;margin:44px 0 0}


/* ===========================================================================
   17. ANIMACIONES DE APARICIÓN AL HACER SCROLL
   ===========================================================================
   Este bloquecito de cinco líneas es el que anima TODA la página, y funciona
   así de simple:
     1. Todo lo que lleve class="anim" empieza invisible y desplazado.
     2. El JavaScript vigila cuándo entra en pantalla y le añade "is-in".
     3. is-in lo devuelve a la normalidad... y como hay una transición de 0,9
        segundos, el navegador hace el recorrido suave él solito.
   El CSS pone la coreografía; el JS solo da la señal de salida. */

.anim{opacity:0;transition:opacity .9s var(--ease),transform .9s var(--ease);will-change:transform,opacity}
/* El selector [data-anim="..."] mira el atributo del HTML, así que el tipo de
   entrada se elige escribiéndolo en la etiqueta, sin tocar el CSS. */
.anim[data-anim="fade-up"]{transform:translateY(42px)}    /* Entra desde abajo. */
.anim[data-anim="fade-left"]{transform:translateX(46px)}  /* Entra desde la derecha. */
.anim[data-anim="fade-right"]{transform:translateX(-46px)}/* Entra desde la izquierda. */
.anim[data-anim="zoom"]{transform:scale(.86)}             /* Entra creciendo. */
/* transform:none anula cualquiera de los tres de arriba y lo deja en su sitio. */
.anim.is-in{opacity:1;transform:none}


/* ===========================================================================
   18. RESPONSIVE — pantallas pequeñas
   ===========================================================================
   Las media queries van AL FINAL a propósito. El CSS se lee de arriba abajo y
   lo último gana, así que estas reglas pisan a las de más arriba cuando se
   cumple la condición. Si las pusieras al principio no servirían de nada. */

/* ---- La barra lateral de redes solo cabe en pantallas anchas ----
   Por debajo de 1280px el contenido central se acerca al borde y el rail se
   le echaría encima, así que desaparece. No se pierde nada: las redes siguen
   teniendo su sección propia y el pie. */
@media (max-width:1279px){
  .rail{display:none}
}

/* ---- LA JUGADA EN PANTALLAS ESTRECHAS ----
   Con poco ancho, dos columnas de texto alternas dejan renglones de cuatro
   palabras, que se leen fatal. Así que la línea se va al margen izquierdo y
   todas las paradas se alinean a su derecha, en una sola columna.
   Fíjate en que no hay que tocar el HTML: las mismas seis paradas se
   recolocan solas cambiando las columnas de la rejilla. */
@media (max-width:860px){
  .play::before,.play::after,.play__ball{left:30px}
  .play__step{grid-template-columns:auto 1fr;gap:20px}
  .play__step:nth-of-type(odd) .play__body,
  .play__step:nth-of-type(even) .play__body{
    grid-column:2;text-align:left;justify-self:start;max-width:none;
  }
  .play__marker{grid-column:1;width:60px}
  /* En una sola columna, que todas entren desde el mismo lado. */
  .play__step.anim[data-anim="fade-left"]{transform:translateX(-30px)}
  .play__step.anim[data-anim="fade-right"]{transform:translateX(-30px)}
  .play__step.anim.is-in{transform:none}
}

/* ---- Tablets y portátiles pequeños ---- */
@media (max-width:980px){
  /* Redibujamos el plano de la rejilla: ahora todo en una columna y en este
     orden → título, móvil, pasos. Solo cambiando estas dos líneas, el móvil
     pasa de estar al lado a estar arriba. Esa es la gracia de las áreas. */
  .showcase__wrap{grid-template-columns:1fr;grid-template-areas:"head" "phone" "steps"}
  /* El móvil sigue pegajoso, pero ahora arriba del todo (bajo la barra de
     navegación) y con un degradado detrás para que los pasos pasen por debajo
     sin cortarse de golpe. */
  .showcase__sticky{
    position:sticky;top:64px;height:auto;padding:18px 0 26px;
    background:linear-gradient(180deg,var(--navy) 72%,transparent);z-index:5;
  }
  .phone__frame{width:min(224px,56vw)}  /* Más pequeño para dejar sitio al texto. */
  .step{padding:30px 0}
  .ranks__grid{grid-template-columns:1fr} /* Los rangos, debajo del texto. */
}

/* ---- Móviles ---- */
@media (max-width:760px){
  /* EL MENÚ LATERAL. Deja de ser una fila y se convierte en un panel a
     pantalla completa, aparcado fuera por la derecha (translateX(100%)).
     inset:0 0 0 auto = pegado arriba, a la derecha y abajo, y por la
     izquierda que lo decida su anchura. */
  .nav__links{
    position:fixed;inset:0 0 0 auto;width:min(320px,86vw);
    flex-direction:column;justify-content:center;gap:26px;padding:40px;
    background:rgba(8,20,37,.97);backdrop-filter:blur(16px);
    transform:translateX(100%);transition:transform .5s var(--ease);
    border-left:1px solid var(--line);
  }
  /* El JS añade is-open al pulsar las rayitas: el panel entra deslizándose. */
  .nav__links.is-open{transform:translateX(0)}
  .nav__links a{font-family:"Anton",sans-serif;font-style:italic;font-size:26px;color:#fff}
  .nav__burger{display:block;z-index:2}  /* Ahora sí se ve el botón hamburguesa. */
  .nav__cta{display:none}                /* Y se esconde el botón naranja: no cabe. */
  .hero{min-height:92svh}
  /* flex:1 1 100% = "ocupa el 100% del ancho", así cada botón va en su fila. */
  .hero__actions .btn{flex:1 1 100%;justify-content:center}
  .marquee{margin-block:-18px 24px}
  .phone__frame{width:min(178px,46vw)}
  .showcase__sticky{top:58px;padding:12px 0 18px}
  .footer__inner{flex-direction:column;gap:24px}
}

/* ---- ACCESIBILIDAD: para quien pide menos movimiento ----
   Hay personas a las que las animaciones les provocan mareo o migraña, y por
   eso los sistemas operativos tienen un ajuste de "reducir movimiento". Esta
   media query lo detecta y apaga TODAS las animaciones de la web, dejando
   cada elemento directamente en su estado final (visible y en su sitio).
   El !important fuerza que estas reglas ganen a cualquier otra. Es de los
   poquísimos casos en los que usarlo está justificado. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  html{scroll-behavior:auto}
  .anim{opacity:1;transform:none}
  .play__marker{opacity:1;transform:none}   /* El marcador de la jugada, visible ya. */
  .hero__title .word{opacity:1;transform:none}
}