/* El mismo azul, el mismo lima y la misma luz que la app. */
:root {
  --navy: #0B1322;
  --navy-alto: #131D33;
  --superficie: #16213A;
  --lima: #B6F24E;
  --lima-oscuro: #8CCB2A;
  --rosa: #FF7AB8;
  --crema: #F4F7FF;
  --apagado: #9AA7BF;
  --borde: rgba(244, 247, 255, .09);
  --radio: 26px;
  --ancho: 1180px;
  /* Lo que mide la cabecera pegajosa, que es igual en todos los tamaños. */
  --cabecera: 78px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--navy);
  color: var(--crema);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* La luz de ambiente: dos manchas que respiran muy despacio, como el fondo
   de la app. Van fijas y detrás de todo. */
.ambiente { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.luz { position: absolute; border-radius: 50%; filter: blur(120px); opacity: .5; }
.luz.lima {
  width: 62vw; height: 62vw; top: -18vw; left: -12vw;
  background: radial-gradient(circle, rgba(182, 242, 78, .34), transparent 68%);
  animation: respira 18s ease-in-out infinite;
}
.luz.rosa {
  width: 52vw; height: 52vw; bottom: -16vw; right: -14vw;
  background: radial-gradient(circle, rgba(255, 122, 184, .22), transparent 68%);
  animation: respira 24s ease-in-out infinite reverse;
}
@keyframes respira {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(2vw, 3vw, 0) scale(1.12); }
}

img { display: block; max-width: 100%; height: auto; }

/* rackers.app/t/{código}: la invitación a un torneo (la pinta torneo.js). */
.invitacion { max-width: 560px; margin: 0 auto; padding: 36px 22px 64px; }
.invitacion .marca { display: inline-block; margin-bottom: 44px; }
.invitacion .antetitulo { color: var(--lima); font-weight: 700; font-size: 15px; letter-spacing: .02em; }
.invitacion h1 { font-size: clamp(34px, 8vw, 50px); line-height: 1.05; letter-spacing: -.02em; margin: 8px 0 10px; }
.invitacion .tipo { color: var(--apagado); font-weight: 600; }
.invitacion .datos { list-style: none; margin: 26px 0; padding: 18px 20px; border-radius: var(--radio);
  background: var(--superficie); border: 1px solid var(--borde); display: grid; gap: 8px; }
.invitacion .datos li { display: flex; align-items: center; gap: 12px; }
.invitacion .datos svg { flex: none; color: var(--lima); }
.invitacion .verificado { color: var(--lima); font-weight: 800; }
.invitacion .pasos { color: var(--apagado); margin-bottom: 10px; }
.invitacion .codigo { font-size: clamp(40px, 12vw, 58px); font-weight: 800; letter-spacing: .18em;
  color: var(--crema); text-shadow: 0 0 36px rgba(182, 242, 78, .35); margin: 4px 0 26px; }
.invitacion .pasos a { color: var(--lima); }
/* La clasificación del torneo en juego: la misma tabla que la app. */
.invitacion .campeon { margin: 26px 0 0; padding: 16px 20px; border-radius: var(--radio); background: var(--superficie);
  border: 1px solid var(--lima); color: var(--crema); font-weight: 800; font-size: 20px; }
.invitacion .campeon span { display: block; color: var(--lima); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.invitacion h2 { font-size: 22px; letter-spacing: -.01em; margin: 34px 0 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.invitacion h2 small { color: var(--apagado); font-size: 14px; font-weight: 600; }
.invitacion .tabla { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.invitacion .tabla th { color: var(--apagado); font-size: 12px; font-weight: 700; text-align: end; padding: 0 6px 8px; }
.invitacion .tabla th:nth-child(2) { text-align: start; }
.invitacion .tabla td { padding: 12px 6px; border-top: 1px solid var(--borde); text-align: end; color: var(--apagado); }
.invitacion .tabla td:first-child { color: var(--apagado); width: 2em; text-align: start; }
.invitacion .tabla td.nombre { text-align: start; color: var(--crema); font-weight: 700; overflow-wrap: anywhere; }
.invitacion .tabla td.valor { color: var(--crema); font-weight: 800; }
.invitacion .tabla tr.primero td:first-child, .invitacion .tabla tr.primero td.valor { color: var(--lima); }
.invitacion .tabla tr.retirado td.nombre { color: var(--apagado); font-weight: 500; }
.invitacion .resultados { list-style: none; margin: 0 0 30px; padding: 0; display: grid; gap: 8px; }
.invitacion .resultados li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 16px;
  border-radius: 16px; background: var(--superficie); border: 1px solid var(--borde); }
.invitacion .resultados .gana { color: var(--crema); font-weight: 700; }
.invitacion .resultados .pierde { color: var(--apagado); }
.invitacion .resultados .marcador { grid-row: span 2; align-self: center; color: var(--crema); font-weight: 800; white-space: nowrap; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 { line-height: 1.04; letter-spacing: -.03em; font-weight: 800; }
h1 { font-size: clamp(42px, 6.4vw, 78px); }
h2 { font-size: clamp(30px, 4.2vw, 52px); }
h3 { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.02em; }
p { color: var(--apagado); }
.entrada { font-size: clamp(17px, 1.6vw, 21px); max-width: 62ch; }
.nota { font-size: 15px; color: var(--apagado); opacity: .8; }

section { max-width: var(--ancho); margin: 0 auto; padding: clamp(60px, 8vw, 112px) 24px; }
/* Al saltar a una sección desde el menú tiene que quedar debajo de la
   cabecera, no tapada por ella. En pantalla ancha el propio relleno de la
   sección ya la salvaba; en el móvil baja a 60 px y el titular se comía la
   cabecera. */
section[id] { scroll-margin-top: var(--cabecera); }

/* --- Cabecera --- */
.cabecera {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  background: rgba(11, 19, 34, .55);
  border-bottom: 1px solid transparent;
  transition: background .3s ease, border-color .3s ease;
}
.cabecera.pegada { background: rgba(11, 19, 34, .88); border-bottom-color: var(--borde); }
.cabecera nav {
  max-width: var(--ancho); margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 24px;
}
.marca { display: flex; align-items: center; }
/* El logotipo ya trae su resplandor dentro del PNG: nada de drop-shadow aquí,
   que se lo pondría también a las letras. */
.marca img { height: 34px; width: auto; }
/* El logotipo animado ocupa más alto que el PNG: las raquetas, al girar, se
   salen por arriba y por abajo de las letras. El hueco mide lo del vídeo
   desde el principio, esté puesto o no, para que al aparecer no dé el salto;
   dentro, el PNG queda centrado justo donde cae el logotipo del vídeo. */
.marca.viva { position: relative; height: 49px; }
.marca video { display: block; height: 49px; width: auto; }
/* Mientras arranca, el vídeo va encima del PNG sin ocupar sitio (ver el
   JavaScript). Sus primeros fotogramas están vacíos, así que no se nota. */
.marca video.aparte { position: absolute; left: 0; top: 0; }
.enlaces { display: flex; gap: 22px; margin-inline-start: auto; font-size: 15px; color: var(--apagado); }
.enlaces a { transition: color .2s ease; }
.enlaces a:hover { color: var(--crema); }
.acciones { display: flex; align-items: center; gap: 12px; }

.idiomas {
  appearance: none; background: rgba(244, 247, 255, .06); color: var(--crema);
  border: 1px solid var(--borde); border-radius: 999px; padding: 8px 14px;
  font: inherit; font-size: 14px; cursor: pointer; max-width: 190px;
}
.idiomas option { background: var(--navy-alto); }

/* --- Botón --- */
.boton {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(160deg, var(--lima), var(--lima-oscuro));
  color: #0A1020; font-weight: 700; font-size: 17px;
  padding: 15px 26px; border-radius: 999px;
  box-shadow: 0 0 0 rgba(182, 242, 78, .5), 0 14px 34px -14px rgba(182, 242, 78, .75);
  transition: transform .25s cubic-bezier(.2, .8, .3, 1), box-shadow .25s ease;
  animation: latido 3.6s ease-in-out infinite;
}
.boton:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 0 34px rgba(182, 242, 78, .4), 0 18px 40px -14px rgba(182, 242, 78, .8); }
.boton.pequeno { padding: 9px 18px; font-size: 15px; animation: none; }
@keyframes latido {
  0%, 100% { box-shadow: 0 0 0 rgba(182, 242, 78, 0), 0 14px 34px -14px rgba(182, 242, 78, .75); }
  50% { box-shadow: 0 0 30px rgba(182, 242, 78, .35), 0 14px 34px -14px rgba(182, 242, 78, .75); }
}
.enlace-suave { color: var(--lima); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.enlace-suave span { transition: transform .25s ease; }
.enlace-suave:hover span { transform: translateY(3px); }

/* --- El móvil --- */
.movil { perspective: 1200px; width: min(100%, 330px); margin-inline: auto; }
/* El marco es el PNG oficial de Apple con el hueco de la pantalla
   transparente: la captura va debajo, colocada en el hueco con los
   porcentajes que salen de medir el propio PNG. La sombra y el resplandor se
   le ponen al marco, no a una caja, para que sigan su silueta. */
.marco { position: relative; container-type: inline-size; }
.marco .bisel {
  position: relative; z-index: 2; display: block; width: 100%; height: auto;
  filter: drop-shadow(0 50px 90px rgba(0, 0, 0, .75))
          drop-shadow(0 0 70px rgba(182, 242, 78, .22));
}
.marco .pantalla-app {
  position: absolute; z-index: 1; object-fit: cover;
  /* El hueco de Apple es un squircle; con esquinas cuadradas la captura
     asomaría en pico. 17cqw es algo más de lo justo, así que se mete bajo
     el titanio y no se ve el corte. */
  border-radius: 17cqw;
}
.flota { will-change: transform; }

/* --- Hero --- */
.hero {
  display: grid; grid-template-columns: 1fr 1.02fr; gap: clamp(28px, 5vw, 64px);
  align-items: center; padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(56px, 8vw, 110px);
}
.hero h1 { margin-bottom: 32px; }
.hero-botones { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 16px; }

/* El peloteo. El móvil va en medio, con Inicio, y encima el vídeo, que
   lleva transparencia: una raqueta a cada lado y la pelota cruzando por
   delante de la pantalla. El vídeo es cuadrado y deja libre el 38 % del
   centro, que es justo lo que mide el móvil, así que casan a cualquier
   tamaño. Sin caja ni recuadro: con el alfa, las raquetas están en la propia
   luz de la página. Debajo, un halo azul que junta las tres piezas.

   La escena se sale un 12 % de la columna por cada lado: lo que se sale es
   el aire que el vídeo deja alrededor de las raquetas —el que necesitan
   para armar el golpe sin que se corten contra el canto del vídeo—, y así el
   móvil no se queda pequeño al lado del título. Pero
   nunca más de lo que queda hasta el borde de la ventana (el margen de la
   sección y, en pantallas más anchas que la página, lo que sobra a cada
   lado): si no, a 1024 px la raqueta de la derecha sale cortada. */
.hero-pieza { position: relative; min-width: 0; }
.hero-escena {
  --lado: min(124%, 710px, 100% + 48px + max(0px, 100vw - var(--ancho)));
  position: relative; width: var(--lado); aspect-ratio: 1;
  margin-inline: calc((100% - var(--lado)) / 2);
}
.hero-escena::before {
  content: ""; position: absolute; z-index: 0; inset: 6% 0;
  background: radial-gradient(50% 50% at 50% 50%, rgba(32, 50, 92, .55), transparent 72%);
  filter: blur(30px); pointer-events: none;
}
.hero-escena .movil {
  position: absolute; z-index: 1; left: 50%; top: 50%;
  width: 38.14%; max-width: none; margin: 0; transform: translate(-50%, -50%);
}
.hero-cartel, .hero-escena video {
  position: absolute; z-index: 2; inset: 0; display: block;
  width: 100%; height: 100%; pointer-events: none;
}

/* --- Deportes: seis cuadrados, uno por raqueta --- */
/* El vídeo ya trae el fondo azul y el brillo de la app, así que la tarjeta
   no pinta nada encima: solo lo recorta, lo enmarca y deja sitio al nombre. */
.rejilla-deportes {
  list-style: none; padding: 0; margin: 44px 0 0;
  display: grid; gap: 18px;
  grid-template-columns: repeat(3, 1fr);
}
.deporte {
  position: relative; overflow: hidden;
  border: 1px solid var(--borde); border-radius: var(--radio);
  transition: transform .35s cubic-bezier(.2, .8, .3, 1),
              box-shadow .35s ease, border-color .35s ease;
}
.deporte video { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
/* Un velo de abajo arriba para que el nombre se lea sin tapar la raqueta. */
.deporte::after {
  content: ""; position: absolute; inset: auto 0 0; height: 58%;
  background: linear-gradient(180deg, transparent, rgba(6, 10, 22, .93));
  pointer-events: none;
}
.deporte h3 {
  position: absolute; inset: auto 0 0; z-index: 1; margin: 0;
  padding: 0 20px 18px; font-size: clamp(18px, 1.6vw, 22px);
}
.deporte:hover {
  transform: translateY(-5px);
  border-color: rgba(182, 242, 78, .45);
  box-shadow: 0 0 38px rgba(182, 242, 78, .18), 0 24px 48px -20px rgba(0, 0, 0, .85);
}

/* --- Pasos --- */
.rejilla-pasos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; list-style: none; }
.paso, .funcion-suelta {
  background: linear-gradient(180deg, rgba(244, 247, 255, .06), rgba(244, 247, 255, .02));
  border: 1px solid var(--borde); border-radius: var(--radio); padding: 28px;
  position: relative; overflow: hidden;
}
.paso::before, .funcion-suelta::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(182, 242, 78, .6), transparent);
}
.paso { display: flex; flex-direction: column; }
/* La captura de cada paso asoma por abajo de la tarjeta, cortada: se ve la
   parte de arriba de la pantalla, que es la que cuenta, y la tarjeta no se
   hace torre. Va pegada al fondo para que las tres queden a la misma altura
   aunque los textos no midan lo mismo. */
.paso-pieza {
  margin: auto -28px -28px; padding-top: 26px; height: 400px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
          mask-image: linear-gradient(to bottom, #000 72%, transparent);
}
.paso-pieza .movil { width: min(74%, 250px); }
.paso-pieza .marco-reloj { width: min(66%, 220px); margin: 12px auto 0; }
/* Aquí el marco va sin su resplandor lima: la tarjeta corta la captura por
   arriba y el resplandor se quedaba cortado en recto. */
.paso-pieza .marco .bisel, .paso-pieza .marco-reloj .bisel {
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .55));
}
.numero {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px;
  background: rgba(182, 242, 78, .14); color: var(--lima); font-weight: 800; margin-bottom: 14px;
}
.paso h3 { margin-bottom: 8px; }

/* --- Funciones --- */
.funciones h2 { margin-bottom: clamp(36px, 6vw, 72px); }
.funcion {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 76px);
  align-items: center; margin-bottom: clamp(64px, 9vw, 130px);
}
.funcion.derecha .funcion-texto { order: 2; }
.funcion h3 { margin-bottom: 14px; }
.funcion p { margin-bottom: 20px; font-size: 18px; }
/* Las que ya enseñan su captura en los pasos: solo texto, de dos en dos. */
.funciones-sueltas {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin-bottom: clamp(64px, 9vw, 130px);
}
.funcion-suelta h3 { margin-bottom: 12px; }
.funcion-suelta p { margin-bottom: 18px; }
.marcas { list-style: none; display: grid; gap: 10px; }
.marcas li { position: relative; padding-inline-start: 26px; color: var(--crema); font-size: 16px; }
.marcas li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .55em;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--lima); box-shadow: 0 0 12px rgba(182, 242, 78, .8);
}

/* --- El reloj --- */
.reloj {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 5vw, 64px); align-items: center;
  background: linear-gradient(150deg, rgba(182, 242, 78, .10), rgba(255, 122, 184, .06) 55%, transparent);
  border: 1px solid var(--borde); border-radius: 42px;
  max-width: var(--ancho); margin: 0 auto; padding: clamp(36px, 6vw, 72px);
}
.reloj h2 { margin-bottom: 16px; }
.reloj p { margin-bottom: 22px; font-size: 18px; }
.reloj-pieza { position: relative; display: grid; place-items: center; min-height: 300px; }
/* Igual que el móvil: el marco oficial de Apple encima y la captura debajo.
   Aquí el bisel tapa las esquinas de la pantalla, así que no hace falta
   redondear la captura. */
.marco-reloj { position: relative; width: min(100%, 290px); }
.marco-reloj .bisel {
  position: relative; z-index: 2; display: block; width: 100%; height: auto;
  filter: drop-shadow(0 34px 60px rgba(0, 0, 0, .8))
          drop-shadow(0 0 54px rgba(182, 242, 78, .3));
}
.marco-reloj .pantalla-app { position: absolute; z-index: 1; object-fit: cover; }
@keyframes pulso { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* --- Precio --- */
/* Centrado solo para las pestañas; el texto de la sección y el de dentro de
   las tarjetas sigue alineado a su lado. */
.precio { text-align: center; }
/* Ojo: la sección y el precio de la tarjeta comparten la clase `precio`, así
   que hay que devolverle la alineación también al de dentro. */
.precio h2, .precio .entrada, .precio .plan, .plan .precio { text-align: start; }
.precio h2 { margin-bottom: 14px; }
.precio .entrada { margin-bottom: 40px; }
/* Las pestañas del precio: mensual, anual y de por vida. Cada panel trae sus
   tarjetas ya escritas; el JS solo enseña uno y esconde los otros. Sin JS se
   ven los tres seguidos, que es peor pero se lee todo. */
.pestanas {
  display: inline-flex; flex-wrap: wrap; max-width: 100%; gap: 4px; margin: 0 auto 26px; padding: 5px;
  background: rgba(244, 247, 255, .05); border: 1px solid var(--borde);
  border-radius: 999px;
}
.pestana {
  appearance: none; border: 0; background: none; cursor: pointer;
  color: var(--apagado); font: inherit; font-size: 15px; font-weight: 700;
  padding: 10px 22px; border-radius: 999px;
  transition: background .25s ease, color .25s ease;
}
.pestana:hover { color: var(--crema); }
.pestana.activa {
  background: linear-gradient(160deg, var(--lima), var(--lima-oscuro));
  color: #0A1020; box-shadow: 0 0 26px -6px rgba(182, 242, 78, .6);
}
.planes.oculto { display: none; }
/* Uno, dos o tres planes según la pestaña: que no se estiren a lo ancho. */
.planes {
  display: grid; gap: 18px; margin-bottom: 20px;
  grid-template-columns: repeat(auto-fit, minmax(0, 320px)); justify-content: center;
}
.plan {
  background: linear-gradient(180deg, rgba(244, 247, 255, .06), rgba(244, 247, 255, .02));
  border: 1px solid var(--borde); border-radius: 28px; padding: 26px 22px;
}
.plan.destacado {
  border-color: rgba(182, 242, 78, .45);
  box-shadow: 0 0 60px -22px rgba(182, 242, 78, .7);
  background: linear-gradient(180deg, rgba(182, 242, 78, .10), rgba(244, 247, 255, .02));
}
.plan h3 { margin-bottom: 6px; }
.precio-plan, .plan .precio { font-size: 30px; font-weight: 800; color: var(--lima); margin-bottom: 20px; letter-spacing: -.02em; }

/* --- Preguntas --- */
.preguntas h2 { margin-bottom: 36px; }
.lista-preguntas { display: grid; gap: 12px; }
details {
  background: rgba(244, 247, 255, .04); border: 1px solid var(--borde);
  border-radius: 20px; padding: 18px 22px; transition: border-color .25s ease;
}
details[open] { border-color: rgba(182, 242, 78, .35); }
summary { cursor: pointer; font-weight: 700; font-size: 18px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--lima); font-weight: 800; transition: transform .25s ease; }
details[open] summary::after { transform: rotate(45deg); }
details p { margin-top: 12px; }

/* --- Cierre y pie --- */
.cierre { text-align: center; }
.cierre h2 { margin-bottom: 14px; }
.cierre .entrada { margin: 0 auto 28px; }
footer { border-top: 1px solid var(--borde); padding: 44px 24px 34px; }
.pie { max-width: var(--ancho); margin: 0 auto; display: flex; flex-wrap: wrap; gap: 18px 32px; align-items: center; }
.pie .nota { margin-inline-end: auto; }
.pie-legal { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 15px; color: var(--apagado); }
.pie-legal a { color: var(--apagado); transition: color .2s ease; }
.pie-legal a:hover { color: var(--crema); }

/* --- Privacidad, Condiciones y Soporte --- */
.documento {
  max-width: 760px; margin: 0 auto; padding: clamp(48px, 7vw, 96px) 24px clamp(60px, 8vw, 112px);
}
.documento h1 { font-size: clamp(38px, 5.4vw, 62px); margin: 0 0 18px; }
.documento .entrada { margin: 0 0 10px; color: var(--crema); }
.documento .nota { margin: 0 0 40px; }
.apartado { margin-bottom: 34px; }
.apartado h2 {
  font-size: clamp(19px, 2vw, 23px); letter-spacing: -.02em; margin: 0 0 10px; color: var(--lima);
}
.apartado p { margin: 0 0 12px; color: var(--apagado); line-height: 1.65; max-width: 62ch; }
.apartado.correo {
  background: rgba(244, 247, 255, .04); border: 1px solid var(--borde);
  border-radius: 20px; padding: 24px 26px; margin-bottom: 40px;
}
.correo-enlace { font-size: clamp(21px, 2.6vw, 28px); font-weight: 800; color: var(--lima); }
.correo-enlace:hover { text-decoration: underline; }
.volver { font-size: 15px; color: var(--apagado); transition: color .2s ease; }
.volver:hover { color: var(--crema); }
.pie-idioma { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--apagado); }
.copyright { max-width: var(--ancho); margin: 22px auto 0; font-size: 14px; color: var(--apagado); opacity: .7; }

/* --- Las animaciones de entrada --- */
.reveal { opacity: 0; transform: translateY(26px); }
.reveal.visto {
  opacity: 1; transform: none;
  transition: opacity .7s cubic-bezier(.2, .8, .3, 1) var(--retraso, 0ms),
              transform .7s cubic-bezier(.2, .8, .3, 1) var(--retraso, 0ms);
}

/* --- Pantallas estrechas --- */
@media (max-width: 900px) {
  .hero, .funcion, .funcion.derecha, .reloj { grid-template-columns: 1fr; }
  /* Una columna: el peloteo va debajo del texto y, en el móvil, de lado a
     lado de la pantalla, comiéndose el margen de la sección. */
  .hero-escena { --lado: min(100% + 48px, 560px); }
  .funcion.derecha .funcion-texto { order: 0; }
  .movil { max-width: 320px; margin: 0 auto; }
  .rejilla-pasos, .funciones-sueltas { grid-template-columns: 1fr; }
  /* Seis cuadrados: tres columnas en pantalla grande, dos aquí. */
  .rejilla-deportes { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .enlaces { display: none; }
  .acciones { margin-inline-start: auto; }
  .idiomas { max-width: 130px; }
}
@media (max-width: 520px) {
  /* Las tres pestañas en una línea: con el relleno de escritorio, «Para
     siempre» partía en dos y dejaba la píldora torcida. */
  .pestana { padding: 9px 13px; font-size: 14px; }
  /* En dos columnas los nombres largos parten en dos líneas: más velo y
     menos cuerpo, para que no se echen encima de la raqueta. */
  .deporte h3 { font-size: 16px; padding: 0 14px 13px; }
  .deporte::after { height: 70%; }
  .marca img { height: 28px; }
  .marca.viva { height: 40px; }
  .marca video { height: 40px; }
  /* En el móvil no caben logotipo, selector y botón: el selector se va, que
     el del pie hace lo mismo. Sin esto el botón se salía de la pantalla. */
  .acciones .idiomas { display: none; }
  .boton { font-size: 16px; padding: 14px 22px; }
}

/* Quien pide menos movimiento, no ve ninguno. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .luz, .boton, .pantalla::after { animation: none; }
  * { transition-duration: .01ms !important; }
}