/* LA PORTADA, EN LIMA (16-10-2026): solo su maquetación y su movimiento. Los componentes (botones, chips, tarjetas
   de juego, cabecera y pie) están en `sistema.css`, y la carta en `carta.css`. Cuatro escenas:

   1 · la primera pantalla: el titular y el botón a un lado, y LA BARAJA al otro, que se REPARTE en 3D al entrar
       y queda abierta en abanico. El reparto es CSS y corre sin JavaScript; `mazo.js` añade inclinar (ratón, dedo
       o giroscopio), arrastrar, PASAR y SALUDAR;
   2 · cómo funciona: DESCUBRIR → SALUDAR → JUGAR, con las pantallas de la app DIBUJADAS en HTML (las de Claude
       Design) y animadas al entrar;
   3 · las rarezas, en escalera de Común a Cristal;
   4 · los juegos con su color, y el cierre con la prueba (el formulario de siempre, solo restilizado).

   Con «reducir movimiento» no se reparte ni se inclina nada: el abanico está abierto desde el principio y las
   pantallas enseñan su estado final, que es el que cuenta. */

/* ═══ 1 · LA PRIMERA PANTALLA ═══════════════════════════════════════════════ */
/* Sin `overflow-x: clip` aquí: cortaba la última carta del abanico en el borde del contenedor. Lo que asome no
   ensancha la página porque `main` ya lo recorta (sistema.css). */
.pt-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
  padding-top: clamp(1.25rem, 0.5rem + 3vw, 3rem);
  align-items: start;
  isolation: isolate;
}
/* El cartel de detrás de la baraja: un bloque plano de lima apagado, inclinado y troquelado. Mesa, no luz. */
.pt-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -12%;
  bottom: 6%;
  width: 62%;
  height: 54%;
  background: var(--surface);
  transform: skewX(var(--inclina));
  clip-path: polygon(0 0, calc(100% - 3rem) 0, 100% 3rem, 100% 100%, 0 100%);
  pointer-events: none;
}
/* El texto por encima de las cartas: el abanico se abre ~250 px a la izquierda de la de delante. */
.pt-hero__texto { position: relative; z-index: 2; display: grid; justify-items: start; }
/* Interlineado 1: por debajo, la tilde de «TÚ» toca la línea de arriba (medido a 390 con 0,88 y 0,94). Y como mucho
   6 rem: más grande, «FIND PEOPLE» de /en se metía debajo de la baraja a 1280. */
.pt-hero .titular { font-size: clamp(2.875rem, 1.2rem + 5.4vw, 6rem); line-height: 1.06; }
@media (min-width: 60rem) { .pt-hero .titular { font-size: clamp(3.5rem, 1.2rem + 4.4vw, 6rem); } }
.pt-hero .linea { max-width: 30rem; margin-top: var(--s-5); color: var(--ink); }
.pt-punto { margin-left: -0.04em; }
.pt-hero__botones { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-3); margin-top: var(--s-6); }

/* ── La baraja ─────────────────────────────────────────────────────────────
   Las cartas van todas en la misma celda (`data-pos` lo escribe el montador: 0 delante, 1–4 detrás, abiertas en
   abanico) y el mazo se escala entero con `--escala` para caber en cada ancho. */
.pt-hero__baraja { display: grid; justify-items: center; gap: var(--s-3); width: 100%; min-width: 0; }
.pt-lema {
  margin: 0;
  font-size: var(--t-etiqueta);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* El mazo (las cartas apiladas, el reparto, los botones y el final) vive en carta.css desde el 17-10-2026: lo
   comparten la portada y /forever. Aquí, lo que es de esta pantalla: el tamaño en cada ancho. */
.pt-hero .fv-nota { margin: 0; font-size: var(--t-pie); color: var(--ink-soft); text-align: center; }

@media (min-width: 60rem) {
  .pt-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 34rem);
    column-gap: var(--s-6);
    align-items: center;
    min-height: calc(100svh - 4rem);
    max-height: 60rem;
    padding-top: 0;
  }
  .pt-hero::after { right: -6%; bottom: 10%; width: 46%; height: 70%; }
  .pt-hero__baraja { justify-self: center; }
  .mazo { --escala: 1; }
}
@media (min-width: 90rem) { .mazo { --escala: 1.06; } }
@media (min-width: 100rem) { .mazo { --escala: 1.12; } }

/* EL TEXTO DEL HERO NO ENTRA: se pinta quieto desde el primer fotograma (17-10-2026, Rafa: titular, botón y baraja al
   instante). Subía por partes desde opacidad 0, y el titular es el LCP. El movimiento de la primera pantalla es la
   baraja y el logo. */
/* La etiqueta de marca sobre el titular: en lima, como TEXTO y sin fondo, para que no se lea como un botón. */
.pt-sello { margin: 0 0 var(--s-4); font: 900 0.9375rem/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--action); }

/* ═══ 2 · CÓMO FUNCIONA: tres pantallas dibujadas ════════════════════════════ */
.pt-pasos {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* el móvil dibujado mide 300 y la columna, a 320, 280: que no la ensanche */
  gap: var(--s-8);
  counter-reset: paso;
}
@media (min-width: 60rem) { .pt-pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6); } }
.pt-paso { counter-increment: paso; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--s-5); text-align: center; }
.pt-paso:nth-child(2) { --tel-giro: 3deg; }
.pt-paso:nth-child(1), .pt-paso:nth-child(3) { --tel-giro: -3deg; }
.pt-paso .paso__pie { margin: 0; max-width: 18rem; }
.pt-paso .paso__pie::before { content: none; display: none; } /* el número ya va en el nombre del paso */
.pt-paso__nombre {
  display: block;
  margin-bottom: var(--s-2);
  font: 900 2.25rem/0.9 var(--display);
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.pt-paso__nombre::before {
  content: counter(paso, decimal-leading-zero) " ";
  color: var(--ink-soft);
}
/* El móvil y las piezas de sus pantallas viven en `pantallas.css` desde el 17-10-2026 (las comparten las guías). Aquí,
   lo que es de la portada: el giro de cada móvil y la coreografía de «Así funciona». */
.pt-tel { transform: rotate(var(--tel-giro, 0deg)); transition: transform 700ms var(--curva-entra); }
/* El móvil dibujado: 300 de ancho, marco casi negro. Se inclina un poco y se endereza al entrar. */
.pt-paso.visto .pt-tel { transform: rotate(0deg); }
@media (max-width: 22.5rem) { .pt-tel { transform: scale(0.9) rotate(var(--tel-giro, 0deg)); } }
/* Pantalla 1 · DESCUBRIR: la carta GRANDE, al 82 %, ocupa todo el hueco entre la cabecera y «Compartís» (como en la
   app); entra deslizando y SALUDAR se pulsa. */
.js .pt-paso .pp-carta { opacity: 0; transform: translateX(60px) rotate(8deg); transition: opacity 500ms var(--curva-entra) 250ms, transform 700ms var(--curva-reparto) 250ms; }
.js .pt-paso.visto .pp-carta { opacity: 1; transform: none; }
.pt-paso.visto .pp-b--pri { animation: pp-pulsa 1.6s var(--curva-estandar) 1.2s 2 both; }
@keyframes pp-pulsa { 0%, 60%, 100% { transform: none; } 70% { transform: translate(3px, 3px); } }
/* Pantalla 2 · SALUDAR: el chat, burbuja a burbuja. */
.js .pt-paso .pp-chat > * { opacity: 0; transform: translateY(12px) scale(0.96); transition: opacity 360ms var(--curva-entra), transform 420ms var(--curva-reparto); }
.js .pt-paso.visto .pp-chat > * { opacity: 1; transform: none; }
.js .pt-paso.visto .pp-chat > :nth-child(1) { transition-delay: 350ms; }
.js .pt-paso.visto .pp-chat > :nth-child(2) { transition-delay: 1150ms; }
.js .pt-paso.visto .pp-chat > :nth-child(3) { transition-delay: 1900ms; }
.js .pt-paso.visto .pp-chat > :nth-child(4) { transition-delay: 2500ms; }
/* Pantalla 3 · JUGAR: te apuntas, y la plaza se llena. */
.pt-paso.visto .pp-sesion--viva .pp-pips i:nth-child(4) { animation: pp-llena 300ms var(--curva-entra) 1.5s both; }
.pt-paso.visto .pp-sesion--viva .pp-cuenta span:first-child,
.pt-paso.visto .pp-sesion--viva .pp-unirme .pp-mini:first-child { animation: pp-sale 240ms linear 1.4s both; }
.pt-paso.visto .pp-sesion--viva .pp-cuenta span + span,
.pt-paso.visto .pp-sesion--viva .pp-unirme .pp-mini + .pp-mini { animation: pp-entra 300ms var(--curva-entra) 1.5s both; }
@keyframes pp-llena { to { background: var(--ink); border-color: var(--ink); } }
@keyframes pp-sale { to { opacity: 0; } }
@keyframes pp-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ═══ 3 · LAS RAREZAS: una escalera de Común a Cristal ═══════════════════════ */
/* EN MÓVIL LA FILA SE DESLIZA, y un `overflow-x: auto` recorta también en vertical: arriba hace falta la subida de la
   escalera entera (5 escalones) más aire para la etiqueta, y abajo la sombra dura (7 px) y algo más (17-10-2026,
   Rafa: se cortaban la etiqueta y el destacado). El escalón, más corto en móvil: con 26 px la fila era casi vacía. */
.pt-rarezas__fila {
  --paso: 14px;
  display: flex;
  align-items: flex-end;
  gap: var(--s-4);
  margin: var(--s-3) calc(var(--gutter) * -1) 0;
  padding: calc(var(--paso) * 5 + var(--s-5)) var(--gutter) var(--s-6);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.pt-rarezas__fila::-webkit-scrollbar { display: none; }
.pt-rareza { flex: none; scroll-snap-align: center; transform: translateY(calc(var(--escalon) * var(--paso) * -1)); }
.pt-rareza:nth-child(1) { --escalon: 0; }
.pt-rareza:nth-child(2) { --escalon: 1; }
.pt-rareza:nth-child(3) { --escalon: 2; }
.pt-rareza:nth-child(4) { --escalon: 3; }
.pt-rareza:nth-child(5) { --escalon: 4; }
.pt-rareza:nth-child(6) { --escalon: 5; }
.js .pt-rareza.revela { transform: translateY(calc(var(--escalon) * var(--paso) * -1 + 60px)); }
.js .pt-rareza.revela.visto { transform: translateY(calc(var(--escalon) * var(--paso) * -1)); }
/* Desde 1248 px caben las seis a todo el ancho de la pantalla, solapadas 4 px: menos que lo que el destacado deja
   libre a la derecha (14 px), así que no tapa nada. Por debajo, la fila se desliza con el dedo. */
@media (min-width: 78rem) {
  .pt-rarezas__fila { --paso: 26px; justify-content: center; overflow: visible; margin-inline: calc(50% - 50vw); margin-top: var(--s-7); padding: var(--s-8) 0 var(--s-5); gap: 0; }
  .pt-rareza + .pt-rareza { margin-left: -4px; }
}

/* ═══ EL CIERRE: el logotipo dibujado a todo el ancho (`/marca/nombre.svg`). Con `width`/`height` en el HTML el
   navegador reserva su alto antes de que llegue: no mueve nada. ═══ */
.pt-firma { margin-top: var(--seccion); padding-inline: var(--gutter); }
.pt-firma__nombre { display: block; width: 100%; max-width: var(--ancho); height: auto; margin-inline: auto; user-select: none; }
.pt.sistema .pie { margin-top: var(--s-6); }

/* ═══ 4 · LOS JUEGOS, CON SU COLOR ═══════════════════════════════════════════
   En la portada la tarjeta entera es del tinte del juego, con la letra en su tinta. */
.pt-juegos .juegos { grid-auto-rows: 1fr; }
.pt-juegos .juegos > li { display: grid; }
.pt-juegos .juego { background: var(--tinte); color: var(--tinte-ink); min-height: 6.5rem; height: 100%; }
.pt-juegos .juego__nombre { font-size: 1.125rem; line-height: 1.05; text-wrap: balance; }
.pt-juegos .juego:hover,
.pt-juegos .juego:focus-visible { background: var(--tinte); }
.pt-juegos .juego__sigla { background: var(--action-ink); color: var(--tinte); }
/* A 320 las columnas miden 134 px y la sigla al lado de «OVERWATCH» o «COUNTER-STRIKE» no cabía: la ficha se ensanchaba
   y se montaba sobre la de al lado (17-10-2026). Ahí, la sigla encima del nombre, como en `.juegos--grandes`. */
@media (max-width: 22.5rem) { .pt-juegos .juego { flex-direction: column; align-items: flex-start; justify-content: center; gap: var(--s-2); } }
.pt-juegos__mas { margin-top: var(--s-5); }

/* ═══ 5 · LA PRUEBA: el cierre, con el formulario de siempre ═════════════════
   iPhone y Android igual de visibles, y la opción elegida decide qué hay debajo con `:has()`. El formulario es EL
   MISMO (ids, nombres, mensajes, límite de formularioWeb): solo cambia cómo se ve. */
.pt-prueba {
  display: grid;
  gap: var(--s-6);
  margin-top: var(--seccion);
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  background: var(--surface);
  clip-path: polygon(0 0, calc(100% - var(--corte-hoja)) 0, 100% var(--corte-hoja), 100% 100%, 0 100%);
  scroll-margin-top: 5rem;
}
@media (min-width: 60rem) {
  .pt-prueba { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-8); align-items: start; }
}
.pt-prueba .seccion__titulo { font-size: clamp(2.5rem, 1.4rem + 4vw, 5rem); }
.pt-movil { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); margin: var(--s-5) 0 0; padding: 0; border: 0; }
.pt-movil legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pt-movil__opcion {
  position: relative;
  display: grid;
  gap: var(--s-1);
  min-height: 4.5rem;
  padding: var(--s-4);
  border: 2px solid var(--surface-raised);
  background: var(--surface-raised);
  clip-path: polygon(0 0, calc(100% - var(--corte-l)) 0, 100% var(--corte-l), 100% 100%, 0 100%);
  cursor: pointer;
  transition: border-color var(--mov-rapido), background var(--mov-rapido);
}
.pt-movil__opcion input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pt-movil__opcion b { font: 900 1.625rem/1 var(--display); text-transform: uppercase; }
.pt-movil__opcion small { font-size: var(--t-pie); color: var(--ink-soft); }
.pt-movil__opcion:hover { border-color: var(--hairline-accent); }
.pt-movil__opcion:has(input:checked) { border-color: var(--ink); }
.pt-movil__opcion:has(input:checked) b::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-left: 0.3em;
  background: var(--action);
  transform: skewX(var(--inclina));
}
.pt-movil:has(input:focus-visible) { outline: 2px solid var(--action); outline-offset: 4px; }
.pt-muestra { display: none; }
@media (min-width: 60rem) {
  /* El relleno de abajo es lo que bajan las esquinas de la carta al girarla 4°: sin él, se salían 10 px de su caja. */
  .pt-muestra { display: flex; justify-content: center; margin-top: var(--s-7); padding-bottom: var(--s-4); }
  .pt-muestra .cl { transform: rotate(-4deg); }
}
.pt-prueba__android { display: none; }
.pt-prueba:has(#movil-android:checked) .pt-prueba__ios { display: none; }
.pt-prueba:has(#movil-android:checked) .pt-prueba__android { display: grid; gap: var(--s-4); justify-items: start; }
.pt-prueba__android p { margin: 0; color: var(--ink-soft); }

.pt-prueba .fv-form { display: grid; gap: var(--s-4); align-content: start; } /* con el alto conservado al enviar, el sitio que sobra va debajo */
.pt-prueba .fv-form > .nota:first-child { margin-top: 0; }
.pt-prueba .fv-form__campos { display: grid; gap: var(--s-4); }
.pt-prueba .fv-campo { display: grid; gap: var(--s-2); margin: 0; padding: 0; border: 0; }
.pt-prueba .fv-campo__nombre { font-size: var(--t-etiqueta); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); }
.pt-prueba .fv-campo__opcional { margin-left: var(--s-2); font-size: var(--t-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.pt-prueba .fv-entrada {
  width: 100%;
  min-height: 3.375rem;
  padding: 0 var(--s-4);
  border: 2px solid var(--surface-raised);
  border-radius: 0;
  background: var(--canvas);
  color: var(--ink);
  font: 500 1.0625rem/1 var(--font);
  clip-path: polygon(0 0, calc(100% - var(--corte-m)) 0, 100% var(--corte-m), 100% 100%, 0 100%);
  transition: border-color var(--mov-rapido);
}
.pt-prueba .fv-entrada::placeholder { color: var(--apagado); }
.pt-prueba .fv-entrada:focus { outline: none; border-color: var(--action); }
.pt-juegos__rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
@media (max-width: 22.5rem) { .pt-juegos__rejilla { grid-template-columns: minmax(0, 1fr); } }
.pt-chip {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 2.75rem;
  padding: 0 var(--s-3);
  border: 2px solid var(--surface-raised);
  background: var(--canvas);
  font-weight: 700;
  font-size: var(--t-pie);
  cursor: pointer;
  transition: border-color var(--mov-rapido);
}
.pt-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.pt-chip__punto { width: 0.625rem; height: 0.75rem; flex: none; border-radius: 0; transform: skewX(var(--inclina)); }
.pt-chip:hover { border-color: var(--hairline-accent); }
.pt-chip:has(input:checked) { border-color: var(--ink); background: var(--surface-raised); }
/* El chip elegido se pone del color de su juego, el de la app (`afirmaciones.mjs` · tintes-lanzamiento). */
.pt:has(.pt-chip--val input:checked) .pt-chip--val { border-color: #FF4655; }
.pt:has(.pt-chip--lol input:checked) .pt-chip--lol { border-color: #0A96AA; }
.pt:has(.pt-chip--cs2 input:checked) .pt-chip--cs2 { border-color: #F5A03C; }
.pt:has(.pt-chip--wow input:checked) .pt-chip--wow { border-color: #C8A24B; }
.pt:has(.pt-chip--fn input:checked) .pt-chip--fn { border-color: #C266A8; }
.pt-chip:has(input:focus-visible) { outline: 2px solid var(--action); outline-offset: 2px; }
.pt-cual { display: none; gap: var(--s-2); margin-top: var(--s-3); }
.pt-cual label { font-weight: 700; font-size: var(--t-pie); }
.pt-juegos-campo:has(.pt-chip--otro input:checked) .pt-cual { display: grid; }
.pt-prueba .fv-trampa { position: absolute; left: -200vw; }
.pt-prueba .fv-casilla { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--t-pie); line-height: 1.45; color: var(--ink-soft); cursor: pointer; }
.pt-prueba .fv-casilla input { flex: none; width: 1.375rem; height: 1.375rem; margin: 0.125rem 0 0; accent-color: var(--action); }
.pt-prueba .fv-aviso { margin: 0; min-height: 1.25rem; font-size: var(--t-pie); color: var(--ink-soft); }
.pt-prueba .fv-aviso:empty { display: none; }
.pt-prueba .fv-hecho { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-3); justify-items: start; align-content: start; }
/* ENVIADO (17-10-2026): un solo bloque, y lo que se decía para enviar —«Déjanos tu correo», el de Android— ya no se
   dice. La nota de lo que se guarda se queda, debajo y entera. El alto lo conserva `lista.js`. */
.pt-prueba .fv-form:has(> .fv-hecho:not([hidden])) > :is(.nota:first-child, .pt-beta) { display: none; }
.pt-prueba .fv-hecho__sello { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 0; background: var(--en-curso); color: var(--action-ink); transform: skewX(var(--inclina)); }
.pt-prueba .fv-hecho__sello svg { width: 1.25rem; height: 1.25rem; transform: skewX(var(--endereza)); }
.pt-prueba .fv-hecho__titulo { margin: 0; font: 900 1.75rem/1 var(--display); text-transform: uppercase; }
.pt-prueba .fv-hecho p { margin: 0; color: var(--ink-soft); }
.pt-prueba .nota a { color: inherit; }

/* Pantallas bajas (iPhone SE, 320×568): lo importante cabe sin bajar (lo mide primera-pantalla.mjs). */
@media (max-width: 22.5rem) { .pt-hero .titular { font-size: 2.5rem; } .mazo { --escala: 0.8; } }
@media (max-height: 40rem) and (max-width: 48rem) {
  .pt-hero { padding-top: var(--s-3); gap: var(--s-3); }
  .pt-hero .titular { font-size: clamp(2.25rem, 1.4rem + 4vw, 2.75rem); }
  .pt-hero .linea { margin-top: var(--s-3); }
  .pt-hero__botones { margin-top: var(--s-4); gap: var(--s-3); }
  .pt-hero__botones .boton { min-height: 2.75rem; font-size: 1.0625rem; }
  .pt-hero__baraja { gap: var(--s-2); }
  .mazo { margin-top: 0; }
}
/* 320×568: la baraja tiene que asomar un cuarto sin bajar (primera-pantalla.mjs). */
@media (max-height: 40rem) and (max-width: 22.5rem) {
  .pt-hero .titular { font-size: 2rem; }
  .pt-sello { margin-bottom: var(--s-2); }
  .pt-lema { display: none; } /* aquí no cabe: «Carta de ejemplo» ya lo dice cada carta */
  .mazo { --escala: 0.72; }
}

@media (prefers-reduced-motion: reduce) {
  .pt-tel { transform: none; transition: none; }
  .js .pt-paso .pp-carta,
  .js .pt-paso .pp-chat > * { opacity: 1; transform: none; transition: none; }
  .pt-paso.visto .pp-b--pri { animation: none; }
  /* La sesión, en su estado final: dentro y con la plaza llena. */
  .pp-sesion--viva .pp-pips i:nth-child(4) { background: var(--ink); border-color: var(--ink); }
  .pp-sesion--viva .pp-cuenta span:first-child,
  .pp-sesion--viva .pp-unirme .pp-mini:first-child { opacity: 0; }
  .pp-sesion--viva .pp-cuenta span + span,
  .pp-sesion--viva .pp-unirme .pp-mini + .pp-mini { opacity: 1; }
  .pt-paso.visto .pp-sesion--viva * { animation: none; }
  .js .pt-rareza.revela { transform: translateY(calc(var(--escalon) * var(--paso) * -1)); }
  .pt-movil__opcion, .pt-chip { transition: none; }
}

/* ═══ LA PASADA DE ANIMACIÓN (17-10-2026) ═══════════════════════════════════════════════════════════════════
   Lo que mueve `js/animacion.js` con GSAP llega con la clase `gsap` en el <html>, cuando GSAP ya ha cargado (después
   de `load`). Hasta entonces, y sin JavaScript o con «reducir movimiento», la página es la de siempre. */

/* Los móviles de «Así funciona» y las rarezas: GSAP los lleva atados al scroll, así que sin transición propia, y las
   rarezas, en su escalón y visibles (la entrada de `.revela` la hace GSAP con lo que aún no se ha visto). */
.gsap .pt-tel { transition: none; }
.gsap .pt-rareza.revela { opacity: 1; transition: none; transform: translateY(calc(var(--escalon) * var(--paso) * -1)); }

/* El imán de los botones (solo con ratón): `translate` se suma al `transform` del pulsado, que sigue debajo. */
.pt .boton { translate: var(--mx, 0px) var(--my, 0px); }

/* ── EL LOGO VIVO: «3 Animación del logo», en su versión pequeña ─────────────────────────────────────────────
   La carta entra lanzada (0–420 ms), rebota (420–600), crece la cola (700–900) y el nombre sube letra a letra.
   Los orígenes, en la caja de cada pieza (`fill-box`): el centro de la carta (504,9 · 439,7 sobre la caja de la lima)
   y la punta de la cola (285 · 743,1). Arranca con la clase `js` (antes de pintar: no espera a ningún script); para
   repetirla, `animacion.js` la apaga con `quieto` y la vuelve a encender. Sin JavaScript, quieto. */
.logo-vivo { overflow: visible; }
.logo-vivo .lv-carta { transform-box: fill-box; transform-origin: 58.3% 44.3%; }
.logo-vivo .lv-cola { transform-box: fill-box; transform-origin: 59.7% 11.9%; }
.logo-vivo .lv-letra { transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes lv-lanza {
  0% { transform: translate(-260px, 420px) rotate(-43.5deg) scale(0.7); opacity: 0; }
  12% { opacity: 1; }
  52% { transform: translate(0, 0) rotate(0deg) scale(1.04); }
  66% { transform: scale(0.985); }
  78% { transform: scale(1.01); }
  100% { transform: none; }
}
@keyframes lv-cola { 0%, 58% { transform: scale(0.0001); } 82% { transform: scale(1.15); } 100% { transform: none; } }
@keyframes lv-letra { 0% { opacity: 0; transform: translateY(46px) skewX(-14deg); } 100% { opacity: 1; transform: none; } }
.js .logo-vivo .lv-carta { animation: lv-lanza 800ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.js .logo-vivo .lv-cola { animation: lv-cola 900ms ease-out both; }
.js .logo-vivo .lv-letra { animation: lv-letra 420ms cubic-bezier(0.22, 1, 0.36, 1) both; }
.js .logo-vivo .lv-letra:nth-child(1) { animation-delay: 380ms; }
.js .logo-vivo .lv-letra:nth-child(2) { animation-delay: 420ms; }
.js .logo-vivo .lv-letra:nth-child(3) { animation-delay: 460ms; }
.js .logo-vivo .lv-letra:nth-child(4) { animation-delay: 500ms; }
.js .logo-vivo .lv-letra:nth-child(5) { animation-delay: 540ms; }
.js .logo-vivo .lv-letra:nth-child(6) { animation-delay: 580ms; }
.js .logo-vivo .lv-letra:nth-child(7) { animation-delay: 620ms; }
.js .logo-vivo.quieto .lv-carta, .js .logo-vivo.quieto .lv-cola, .js .logo-vivo.quieto .lv-letra { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .logo-vivo .lv-carta, .logo-vivo .lv-cola, .logo-vivo .lv-letra { animation: none; }
  .pt .boton { translate: none; }
}

/* ═══ ÚNETE A LA COMUNIDAD (17-10-2026): el Discord, con el botón secundario ═══ */
.pt-comunidad .boton { margin-top: var(--s-5); }