/* f2 · Portada (#stepScreen-1 y «En 3 pasos» #stepScreen-2).
   Usa las variables y piezas de f2.css. Móvil primero: la base es la columna única con la
   imagen del héroe a sangre; desde 900 px pasa a dos columnas dentro de una tarjeta.
   Se carga después de styles.css, illustrations.css y reviews.css: los selectores con
   .f2p-stage ganan a las reglas antiguas de .hero-stage sin tocarlas (varias pruebas las leen).
   Solo propiedades lógicas (el árabe se refleja solo) y animaciones de transform/opacity. */

/* --f2p-gutter repite el padding lateral de .container en cada ancho: con él la imagen y la
   banda de reseñas llegan justo al borde de la ventana, sin desbordarla. */
#stepScreen-1 { --f2p-gutter: 32px; }
@media (max-width: 1150px) { #stepScreen-1 { --f2p-gutter: 24px; } }
@media (max-width: 680px) { #stepScreen-1 { --f2p-gutter: 16px; } }
@media (max-width: 380px) { #stepScreen-1 { --f2p-gutter: 12px; } }

/* La pantalla empieza arriba y deja sitio abajo para la barra fija del móvil. */
#stepScreen-1.active {
  justify-content: flex-start;
  gap: 26px;
  padding-block: 0 calc(92px + var(--f2-safe-b));
}

/* La tarjeta antigua desaparece en móvil: cada bloque trae su propio fondo. */
.hero-stage.f2p-stage {
  display: block;
  max-width: 1232px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-align: start;
}

/* ------------------------------------------------------------------ Héroe */
.f2p-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
/* Imagen a sangre, recortada a 16:10 y fundida por abajo con el fondo de la página. */
.f2p-art {
  position: relative;
  aspect-ratio: 16 / 10;
  /* Ancho explícito (el de la ventana) para que el tope de alto recorte la imagen (object-fit)
     en vez de estrecharla: con el móvil en horizontal no se come la pantalla. */
  inline-size: calc(100% + var(--f2p-gutter) * 2);
  max-block-size: 60vh;
  max-block-size: 60svh;
  margin: 0;
  margin-inline: calc(var(--f2p-gutter) * -1);
  isolation: isolate;
}
/* Foco de escenario detrás: asoma donde la imagen se funde. */
.f2p-art::before {
  content: "";
  position: absolute;
  inset: 8% 6% -6%;
  z-index: -1;
  background: radial-gradient(60% 55% at 50% 60%, rgba(56, 214, 255, .34), rgba(155, 123, 255, .16) 55%, transparent 78%);
}
/* Velo superior para que la marca se lea sobre la imagen. */
.f2p-art::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  block-size: 34%;
  background: linear-gradient(180deg, rgba(5, 11, 26, .82), rgba(5, 11, 26, 0));
  pointer-events: none;
}
.f2p-art-img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 74%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 9%, #000 74%, transparent 100%);
  -webkit-user-select: none;
  user-select: none;
}

.f2p-stage .hero-copy {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  /* La ceja monta sobre el final del fundido de la imagen, sin tapar a los personajes. */
  margin-block-start: -15px;
  padding: 0;
  text-align: center;
}

/* Marca a un lado y «Bot lobbies para Fortnite» al otro, sobre la parte alta de la imagen. */
.f2p-brand {
  position: absolute;
  inset-block-start: 10px;
  inset-inline: 0;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  text-align: start;
}
.f2p-stage .brand-wordmark {
  flex: 0 0 auto;
  gap: 8px;
  margin: 0;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .01em;
  text-shadow: 0 1px 10px rgba(2, 8, 23, .9);
}
.f2p-stage .brand-wordmark .brand-mark { width: 32px; height: 32px; }
/* En los móviles más estrechos la marca se encoge un punto para no rozar la cabeza del jugador. */
@media (max-width: 380px) {
  .f2p-stage .brand-wordmark { gap: 6px; font-size: .66rem; }
  .f2p-stage .brand-wordmark .brand-mark { width: 28px; height: 28px; }
}
/* Sin mayúsculas forzadas ni espaciado: en árabe separan las letras y en japonés, coreano o chino
   no existen. Una línea a 390 px; dos, equilibradas, en los idiomas largos. */
.f2p-stage .hero-eyebrow {
  max-inline-size: 54%;
  margin: 0;
  padding-block-start: 8px;
  color: #e3eefc;
  font-size: .74rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  text-align: end;
  text-transform: none;
  text-shadow: 0 1px 10px rgba(2, 8, 23, .95), 0 0 2px rgba(2, 8, 23, .8);
  text-wrap: balance;
  overflow-wrap: anywhere;
}

/* Ceja: disponibilidad real de la prueba. Los colores del punto siguen en styles.css. */
.f2p-stage .trial-availability {
  position: relative;
  z-index: 1;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin: 0;
  padding: 5px 13px 5px 11px;
  border: 1px solid rgba(141, 229, 255, .22);
  /* 16 px: píldora con una línea y caja redondeada si el aviso ocupa dos. */
  border-radius: 16px;
  background: rgba(7, 15, 34, .78);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: .74rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: start;
}
.f2p-stage .trial-availability[data-availability="ready"] { border-color: rgba(121, 224, 183, .42); }
.f2p-stage .trial-availability .offer-dot { position: relative; margin: 0; }
.f2p-stage .trial-availability[data-availability="ready"] .offer-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--fn-green);
  animation: f2p-ping 2s ease-out infinite;
}

.f2p-stage .step-giant-title {
  max-width: 100%;
  margin: 12px 0 10px;
  /* 7,1vw: «Más opciones de victoria.» cabe en una línea desde 360 px (el titular queda en tres). */
  font-size: clamp(1.6rem, 7.1vw, 2.5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.045em;
  text-shadow: 0 2px 24px rgba(2, 8, 23, .65);
}
/* Segunda línea: el resultado, en degradado de cian a violeta claro. */
.f2p-stage .step-giant-title > span:not(.i18n-text) {
  background: linear-gradient(90deg, #8de5ff 10%, #c4b5ff 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
}
@media (forced-colors: active) {
  .f2p-stage .step-giant-title > span:not(.i18n-text) { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
}
.f2p-stage .step-short-sub {
  max-width: 34ch;
  margin: 0 0 16px;
  color: var(--f2-text-soft);
  font-size: .95rem;
  line-height: 1.5;
}

.f2p-stage .hero-actions { align-items: stretch; gap: 0; }
/* Botón principal: enorme, con brillo que cruza y halo cian. */
.f2p-stage #btnHomeStart {
  position: relative;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 62px;
  padding: 14px 22px;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(180deg, #d2f6ff 0%, #7fe2ff 52%, #43cbf4 100%);
  color: #04213a;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.01em;
  box-shadow: var(--f2-glow-cyan), inset 0 1px 0 rgba(255, 255, 255, .75), 0 18px 40px -14px rgba(56, 214, 255, .75);
}
.f2p-stage #btnHomeStart:hover:not(:disabled) { background: linear-gradient(180deg, #e2faff 0%, #9aeaff 52%, #5bd5f8 100%); }
.f2p-stage #btnHomeStart::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 42%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent);
  transform: translateX(-140%) skewX(-18deg);
  animation: f2p-shine 4.6s var(--f2-ease) 1.2s infinite;
  pointer-events: none;
}
.f2p-stage #btnHomeStart .bot-icon { width: 22px; height: 22px; stroke-width: 2.4; }
html[dir="rtl"] .f2p-stage :is(#btnHomeStart, .f2p-cta, .home-text-action) [data-icon="arrow-right"] > .bot-icon { scale: -1 1; }
html[dir="rtl"] .f2p-stage .home-text-action [data-icon="arrow-up-right"] > .bot-icon,
html[dir="rtl"] .f2p-dock [data-icon="arrow-right"] > .bot-icon { scale: -1 1; }

/* Tres fichas de confianza con el icono arriba. Cada una mide lo que su texto y entre las tres
   llenan la fila: así «Nada que instalar» cabe en una línea a 390 px; si no caben, la más larga
   parte su texto (Installation, установки… desde 320 px en cualquier idioma). */
.f2p-chips {
  display: flex;
  gap: 8px;
  width: 100%;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}
.f2p-chip {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-inline-size: 0;
  min-block-size: 44px;
  padding: 7px 6px;
  border: 1px solid var(--f2-stroke);
  border-radius: var(--f2-radius-s);
  background: rgba(13, 24, 48, .66);
  color: var(--f2-text-soft);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
}
.f2p-chip .bot-icon { width: 15px; height: 15px; color: var(--f2-mint); stroke-width: 2.2; }

/* Enlaces secundarios: pequeños, bajo las fichas, sin competir con el botón. */
.f2p-stage .hero-more { width: 100%; margin-block-start: 6px; }
.f2p-stage .hero-secondary-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px;
  width: 100%;
  margin: 0;
}
.f2p-stage .hero-secondary-actions .home-text-action {
  justify-content: center;
  min-height: 44px;
  padding: 4px 0;
  color: var(--f2-text-dim);
  font-size: .72rem;
  line-height: 1.3;
  text-align: center;
  text-decoration-color: rgba(147, 167, 198, .4);
}
.f2p-stage .hero-secondary-actions .home-text-action > .i18n-text { text-wrap: balance; }
.f2p-stage .hero-secondary-actions .home-text-action > span[aria-hidden="true"] { display: none; }
.f2p-stage .home-text-action .bot-icon { width: 13px; height: 13px; }
.f2p-stage .home-text-action:hover { color: var(--f2-cyan); }

/* ---------------------------------------------------------------- Reseñas */
.f2p-stage > .reviews-showcase {
  margin-block-start: 18px;
  --reviews-bleed: var(--f2p-gutter);
}
.f2p-stage > .reviews-showcase .reviews-head { margin-block-end: 12px; text-align: center; }
.f2p-stage > .reviews-showcase .reviews-title { font-size: 1.12rem; font-weight: 800; }
.f2p-stage > .reviews-showcase .reviews-note { margin-block-start: 2px; color: var(--f2-text-dim); }
.f2p-stage > .reviews-showcase .reviews-band { --reviews-edge: var(--f2-ink); }

/* ------------------------------------------------- Bloques bajo el héroe */
.f2p-block { margin-block-start: 38px; }
.f2p-title {
  margin: 0 0 16px;
  color: var(--f2-text);
  font-size: clamp(1.3rem, 5.6vw, 1.7rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.035em;
  text-align: center;
  text-wrap: balance;
}
.f2p-lead {
  max-width: 44ch;
  margin: -8px auto 16px;
  color: var(--f2-text-soft);
  font-size: .9rem;
  line-height: 1.55;
  text-align: center;
  text-wrap: pretty;
}

/* Muestra: así puede verse tu bot. Tres skins del catálogo de pie sobre el podio del escenario
   (el fondo se coloca para que el podio quede bajo sus pies) y la placa «Tu bot» sobre la del centro.
   Todo va en porcentajes del ancho: la composición es la misma en cualquier tamaño. */
.f2p-show-stage {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2.5%;
  aspect-ratio: 10 / 7;
  max-inline-size: 560px;
  margin-inline: auto;
  padding-block-end: 16.5%;
  overflow: hidden;
  border: 1px solid var(--f2-stroke-strong);
  border-radius: var(--f2-radius-l);
  background: var(--f2-deep);
  box-shadow: var(--f2-shadow-card), 0 0 70px -26px rgba(56, 214, 255, .6);
  isolation: isolate;
}
/* El escenario es una imagen diferida (un fondo de CSS se descargaría al entrar, compitiendo con el
   héroe). Se recorta para que el podio quede bajo los pies de las skins. */
.f2p-show-bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 50% 85%;
  -webkit-user-select: none;
  user-select: none;
}
/* Foco sobre la skin del centro y penumbra en los bordes. */
.f2p-show-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(42% 70% at 50% 34%, rgba(141, 229, 255, .26), transparent 72%), linear-gradient(180deg, rgba(5, 11, 26, .35), transparent 30%, transparent 76%, rgba(5, 11, 26, .55));
}
.f2p-show-fig { position: relative; flex: 0 0 auto; inline-size: 20.5%; }
/* Los pies se funden con la luz del podio: el recorte del catálogo de la skin del centro acaba en las botas. */
.f2p-show-fig > img {
  display: block;
  inline-size: 100%;
  block-size: auto;
  filter: drop-shadow(0 0 16px rgba(56, 214, 255, .4));
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 93%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 93%, transparent 100%);
  -webkit-user-select: none;
  user-select: none;
}
/* Sombra de contacto sobre el podio. */
.f2p-show-fig::after {
  content: "";
  position: absolute;
  inset-inline: 4%;
  inset-block-end: -2.5%;
  z-index: -1;
  block-size: 7%;
  border-radius: 50%;
  background: rgba(2, 8, 23, .6);
  filter: blur(5px);
}
/* Las de los lados, algo más pequeñas y en penumbra: la del centro es «tu bot». */
.f2p-show-fig--side { inline-size: 17%; margin-block-end: 1.2%; }
.f2p-show-fig--side > img { filter: brightness(.78) saturate(.92); }
.f2p-show-tag {
  position: absolute;
  inset-block-start: 5%;
  inset-inline: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  inline-size: fit-content;
  max-inline-size: 72%;
  margin-inline: auto;
  padding: 5px 13px;
  border: 1px solid rgba(121, 224, 183, .55);
  border-radius: var(--f2-radius-pill);
  background: rgba(7, 15, 34, .84);
  color: #eafff6;
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.3;
  box-shadow: 0 8px 22px -10px rgba(2, 8, 23, .9);
}
.f2p-show-dot {
  flex: 0 0 auto;
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--f2-mint);
  box-shadow: 0 0 0 3px rgba(121, 224, 183, .2);
}
.f2p-wins { margin-block-start: 18px; }
.f2p-subtitle {
  margin: 0 0 12px;
  color: var(--f2-text-soft);
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
}

/* Así funciona: tres tarjetas con la mascota. */
.f2p-steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.f2p-step {
  position: relative;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 12px 16px 12px 12px;
  border: 1px solid var(--f2-stroke);
  border-radius: var(--f2-radius-m);
  background: linear-gradient(135deg, rgba(20, 35, 63, .92), rgba(10, 19, 40, .92));
  box-shadow: 0 14px 34px -22px rgba(2, 8, 23, .9);
}
.f2p-step-art {
  position: relative;
  display: grid;
  place-items: end center;
  block-size: 100px;
  border-radius: 14px;
  background: radial-gradient(70% 60% at 50% 86%, rgba(56, 214, 255, .3), transparent 72%), linear-gradient(160deg, rgba(27, 52, 86, .9), rgba(11, 22, 45, .9));
}
.f2p-step-art .f2-mascot { --f2-mascot-h: 96px; inline-size: auto; max-inline-size: none; }
.f2p-step-num {
  position: absolute;
  inset-block-start: -7px;
  inset-inline-start: -7px;
  display: grid;
  place-items: center;
  inline-size: 28px;
  block-size: 28px;
  border: 2px solid #0b1630;
  border-radius: 50%;
  background: var(--f2-cyan);
  color: #04213a;
  font-size: .86rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.f2p-step-copy { display: grid; gap: 4px; min-width: 0; }
.f2p-step-name {
  margin: 0;
  color: var(--f2-text);
  font-size: 1.04rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.f2p-step-text { margin: 0; color: var(--f2-text-soft); font-size: .86rem; line-height: 1.45; text-wrap: pretty; }
.f2p-how-more { display: flex; justify-content: center; margin: 4px 0 0; }
.f2p-how-more .home-text-action { color: var(--f2-text-dim); font-size: .76rem; text-decoration-color: rgba(147, 167, 198, .35); }

/* Ventajas: los iconos de siempre, como tarjetas. */
.f2p-stage .hero-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}
.f2p-stage .hero-benefits li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: none;
  padding: 16px 8px 14px;
  border: 1px solid var(--f2-stroke);
  border-radius: var(--f2-radius-m);
  background: radial-gradient(80% 50% at 50% 0%, rgba(155, 123, 255, .2), transparent 70%), linear-gradient(160deg, rgba(20, 35, 63, .92), rgba(10, 19, 40, .92));
  color: var(--f2-text);
  font-size: .8rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
}
.f2p-stage .hero-benefits img {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  filter: drop-shadow(0 8px 14px rgba(2, 8, 23, .6));
}

/* Vídeo: debajo de las ventajas; el marco conserva su proporción 16:9. */
.f2p-video .hero-display.hero-video-card {
  border-color: var(--f2-stroke-strong);
  border-radius: var(--f2-radius-m);
}

/* Cierre: la mascota señala el botón repetido. */
.f2p-final {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "bot copy" "cta cta" "facts facts";
  align-items: center;
  gap: 14px 12px;
  padding: 20px 16px 16px;
  overflow: hidden;
  border: 1px solid var(--f2-stroke-strong);
  border-radius: var(--f2-radius-l);
  background: var(--f2-deep);
  box-shadow: var(--f2-shadow-card);
  isolation: isolate;
}
/* Fondo propio (estelas cian y violeta) con velo para que el texto se lea. */
.f2p-final::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(7, 17, 42, .5), rgba(7, 17, 42, .86)), url('/assets/f2/fondo-ancho-1280.webp') 78% 50% / cover no-repeat;
}
html[dir="rtl"] .f2p-final::before { transform: scaleX(-1); }
.f2p-final-bot { grid-area: bot; --f2-mascot-h: 116px; }
html[dir="rtl"] .f2p-final-bot { scale: -1 1; }
.f2p-final-copy { grid-area: copy; min-width: 0; }
.f2p-final .f2p-title { margin: 0 0 6px; text-align: start; }
.f2p-final .f2p-lead { margin: 0; text-align: start; }
.f2p-final .hero-actions { grid-area: cta; }
.f2p-stage .f2p-final .hero-facts {
  grid-area: facts;
  justify-content: center;
  gap: 6px 14px;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--f2-text-soft);
  font-size: .76rem;
  font-weight: 600;
}
.f2p-stage .f2p-final .hero-facts > span::before { color: var(--f2-mint); }

/* Botones repetidos (cierre y barra fija). No llevan .btn: el principal sigue siendo único. */
.f2p-cta { min-block-size: 58px; font-size: 1.04rem; line-height: 1.2; }
.f2p-cta .bot-icon { width: 20px; height: 20px; stroke-width: 2.4; }
.f2p-cta.is-loading::before {
  content: "";
  flex: 0 0 15px;
  block-size: 15px;
  border: 2px solid currentColor;
  border-inline-end-color: transparent;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

/* Barra fija inferior del móvil: aparece cuando el botón principal sale de la vista. */
.f2p-dock {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 40;
  display: block;
  width: auto;
  padding: 18px 14px calc(12px + var(--f2-safe-b));
  background: linear-gradient(180deg, rgba(5, 11, 26, 0), rgba(5, 11, 26, .94) 38%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(100%);
  transition: transform var(--f2-med) var(--f2-ease), opacity var(--f2-med) var(--f2-ease), visibility 0s linear var(--f2-med);
  pointer-events: none;
}
.f2p-dock.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
  pointer-events: auto;
}
.f2p-dock .f2p-cta { max-inline-size: 520px; margin-inline: auto; }

@keyframes f2p-ping { from { transform: scale(1); opacity: .65; } to { transform: scale(3.2); opacity: 0; } }
@keyframes f2p-shine { 0%, 58% { transform: translateX(-140%) skewX(-18deg); } 100% { transform: translateX(380%) skewX(-18deg); } }

/* Móviles muy bajos (360×640 y el navegador de TikTok): la imagen cede alto para que el
   botón quede a la vista sin desplazar. */
@media (max-width: 899px) and (max-height: 700px) {
  .f2p-art { aspect-ratio: 2 / 1; }
  .f2p-stage .step-giant-title { margin-block: 10px 8px; }
  .f2p-stage .step-short-sub { margin-block-end: 12px; font-size: .9rem; }
}

/* Móvil en horizontal: la franja recortada enseña las cabezas, no el suelo. */
@media (max-width: 899px) and (orientation: landscape) {
  .f2p-art-img { object-position: 50% 14%; }
}

@media (min-width: 430px) {
  .f2p-chip { font-size: .76rem; }
  .f2p-stage .hero-secondary-actions .home-text-action { font-size: .76rem; }
}

/* Móviles bajos, segunda parte: las fichas pasan a una fila de texto con su icono y el título de
   las reseñas se retira de la vista (sigue para los lectores de pantalla), para que al final de la
   primera pantalla asome una reseña real y no solo su título. */
@media (max-width: 899px) and (max-height: 700px) {
  /* Con la imagen más baja la cabeza del jugador queda entre la marca y la ceja de texto: esta se
     retira de la vista (sigue en la página para lectores de pantalla). */
  .f2p-stage .hero-eyebrow { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .f2p-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-block-start: 10px; }
  .f2p-chip { flex: 0 1 auto; flex-direction: row; gap: 5px; min-block-size: 0; padding: 0; border: 0; border-radius: 0; background: none; font-size: .72rem; }
  .f2p-chip .bot-icon { width: 14px; height: 14px; }
  .f2p-stage .hero-more { margin-block-start: 2px; }
  .f2p-stage > .reviews-showcase { margin-block-start: 6px; }
  .f2p-stage > .reviews-showcase .reviews-head {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Tableta en vertical: una columna centrada, sin estirar el texto. */
@media (min-width: 600px) and (max-width: 899px) {
  .f2p-stage .hero-copy { margin-block-start: -24px; }
  .f2p-stage .hero-actions, .f2p-chips, .f2p-stage .hero-more { max-inline-size: 520px; }
  .f2p-chip { flex-direction: row; gap: 6px; padding: 6px 10px; font-size: .78rem; text-align: start; }
  .f2p-steps, .f2p-stage .hero-benefits, .f2p-video .hero-video-card { max-inline-size: 640px; margin-inline: auto; }
  .f2p-show-stage { max-inline-size: 600px; }
  .f2p-final { max-inline-size: 640px; margin-inline: auto; }
  .f2p-step { grid-template-columns: 112px minmax(0, 1fr); }
  .f2p-step-art { block-size: 118px; }
  .f2p-step-art .f2-mascot { --f2-mascot-h: 114px; }
}

/* ------------------------------------------------------------- Escritorio */
@media (min-width: 900px) {
  #stepScreen-1.active { gap: 22px; padding-block: 26px 36px; }
  .hero-stage.f2p-stage {
    overflow: hidden;
    border: 1px solid var(--f2-stroke);
    border-radius: 28px;
    background: radial-gradient(60% 30% at 50% 100%, rgba(55, 120, 238, .16), transparent 70%), var(--f2-deep);
    box-shadow: var(--f2-shadow-card);
  }
  /* Dos columnas: texto y botón a un lado, la imagen grande al otro, sobre el fondo de estelas. */
  .f2p-hero {
    grid-template-columns: minmax(0, .96fr) minmax(0, 1.08fr);
    align-items: center;
    gap: 44px;
    padding: 40px 44px 44px;
    isolation: isolate;
  }
  .f2p-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(90deg, rgba(7, 17, 42, .94) 0%, rgba(7, 17, 42, .62) 44%, rgba(7, 17, 42, .12) 100%), url('/assets/f2/fondo-ancho-1280.webp') center / cover no-repeat;
  }
  html[dir="rtl"] .f2p-hero::before { transform: scaleX(-1); }
  .f2p-art {
    order: 2;
    aspect-ratio: 3 / 2;
    inline-size: auto;
    max-block-size: none;
    margin: 0;
    border: 1px solid var(--f2-stroke-strong);
    border-radius: var(--f2-radius-l);
    overflow: hidden;
    box-shadow: 0 34px 80px -20px rgba(2, 8, 23, .85), 0 0 90px -10px rgba(56, 214, 255, .35);
  }
  .f2p-art::before, .f2p-art::after { display: none; }
  .f2p-art-img { object-position: 50% 50%; -webkit-mask-image: none; mask-image: none; }
  .f2p-stage .hero-copy { order: 1; align-items: flex-start; margin: 0; text-align: start; }
  .f2p-brand {
    position: static;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    margin-block-end: 26px;
  }
  .f2p-stage .brand-wordmark { font-size: .84rem; text-shadow: none; }
  .f2p-stage .brand-wordmark .brand-mark { width: 40px; height: 40px; }
  .f2p-stage .hero-eyebrow {
    max-inline-size: none;
    padding-block: 2px;
    padding-inline-start: 14px;
    border-inline-start: 1px solid var(--f2-stroke-strong);
    color: var(--f2-text-dim);
    font-size: .8rem;
    font-weight: 600;
    text-align: start;
    text-shadow: none;
  }
  .f2p-stage .trial-availability { font-size: .78rem; }
  .f2p-stage .step-giant-title { margin: 16px 0 14px; font-size: clamp(2.3rem, 3.55vw, 3rem); line-height: 1.06; }
  .f2p-stage .step-short-sub { max-width: 30ch; margin-block-end: 24px; font-size: 1.08rem; }
  .f2p-stage #btnHomeStart { min-height: 68px; padding-inline: 30px; font-size: 1.2rem; }
  .f2p-chips { display: flex; flex-wrap: wrap; margin-block-start: 16px; }
  .f2p-chip { flex: 0 0 auto; flex-direction: row; gap: 6px; min-block-size: 36px; padding: 6px 13px; border-radius: var(--f2-radius-pill); font-size: .8rem; white-space: nowrap; }
  .f2p-stage .hero-more { margin-block-start: 10px; }
  .f2p-stage .hero-secondary-actions { display: flex; flex-wrap: wrap; gap: 0 22px; }
  .f2p-stage .hero-secondary-actions .home-text-action { justify-content: flex-start; font-size: .78rem; text-align: start; }
  .f2p-stage .hero-secondary-actions .home-text-action > span[aria-hidden="true"] { display: inline; }

  .f2p-stage > .reviews-showcase {
    margin-block-start: 0;
    padding: 34px 44px 6px;
    --reviews-bleed: 44px;
  }
  .f2p-stage > .reviews-showcase .reviews-head { text-align: start; }
  .f2p-stage > .reviews-showcase .reviews-title { font-size: 1.4rem; }
  .f2p-stage > .reviews-showcase .reviews-band { --reviews-edge: var(--f2-deep); }

  .f2p-block { margin-block-start: 0; padding: 40px 44px 0; }
  .f2p-title { margin-block-end: 22px; font-size: 1.9rem; }
  .f2p-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .f2p-step {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    justify-items: center;
    gap: 16px;
    padding: 22px 20px 24px;
    text-align: center;
    transition: transform var(--f2-fast) var(--f2-ease), border-color var(--f2-fast) var(--f2-ease);
  }
  .f2p-step:hover { transform: translateY(-4px); border-color: var(--f2-stroke-strong); }
  .f2p-step-art { inline-size: 100%; block-size: 168px; }
  .f2p-step-art .f2-mascot { --f2-mascot-h: 160px; }
  .f2p-step-num { inset-block-start: -10px; inset-inline-start: -10px; inline-size: 36px; block-size: 36px; font-size: 1.05rem; }
  .f2p-step-copy { justify-items: center; gap: 6px; }
  .f2p-step-name { font-size: 1.22rem; }
  .f2p-step-text { max-inline-size: 28ch; font-size: .95rem; }
  .f2p-how-more { margin-block-start: 10px; }

  /* Muestra a un lado; al otro, su texto y las ventajas en lista. */
  .f2p-show {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
    grid-template-areas: "stage copy" "stage wins";
    grid-template-rows: auto auto;
    align-content: center;
    column-gap: 44px;
    row-gap: 22px;
  }
  .f2p-show-stage { grid-area: stage; align-self: center; inline-size: 100%; max-inline-size: none; margin: 0; }
  .f2p-show-copy { grid-area: copy; }
  .f2p-show .f2p-title { margin-block-end: 12px; text-align: start; }
  .f2p-show .f2p-lead { max-inline-size: 42ch; margin: 0; font-size: 1.02rem; text-align: start; }
  .f2p-show-tag { padding: 7px 16px; font-size: .9rem; }
  .f2p-wins { grid-area: wins; margin: 0; }
  .f2p-subtitle { margin-block-end: 12px; font-size: .9rem; text-align: start; }
  .f2p-stage .hero-benefits { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .f2p-stage .hero-benefits li { flex-direction: row; justify-content: flex-start; gap: 14px; padding: 10px 18px; font-size: 1rem; text-align: start; }
  .f2p-stage .hero-benefits img { width: 44px; height: 44px; flex-basis: 44px; }

  /* Vídeo con su texto al lado. */
  .f2p-video { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: 36px; }
  .f2p-video .f2p-title { margin-block-end: 12px; text-align: start; }
  .f2p-video .f2p-lead { margin: 0; font-size: 1.02rem; text-align: start; }

  .f2p-final {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "bot copy cta" "bot facts cta";
    gap: 10px 28px;
    margin: 40px 44px 44px;
    padding: 26px 36px 26px 28px;
  }
  .f2p-final::before {
    background: linear-gradient(90deg, rgba(7, 17, 42, .9) 0%, rgba(7, 17, 42, .5) 55%, rgba(7, 17, 42, .2) 100%), url('/assets/f2/fondo-ancho-1280.webp') center / cover no-repeat;
  }
  .f2p-final-bot { --f2-mascot-h: 150px; }
  .f2p-final-copy { align-self: end; }
  .f2p-final .f2p-title { font-size: 1.9rem; }
  .f2p-final .f2p-lead { font-size: 1.02rem; }
  .f2p-stage .f2p-final .hero-facts { align-self: start; justify-content: flex-start; }
  .f2p-final .f2p-cta { min-inline-size: 300px; min-block-size: 66px; font-size: 1.14rem; }

  .f2p-dock { display: none; }
}
@media (min-width: 1600px) {
  .f2p-hero::before {
    background-image: linear-gradient(90deg, rgba(7, 17, 42, .94) 0%, rgba(7, 17, 42, .62) 44%, rgba(7, 17, 42, .12) 100%), url('/assets/f2/fondo-ancho-1920.webp');
  }
}

/* --------------------------------------- «En 3 pasos» (#stepScreen-2) */
/* Misma estructura y medidas que fijan las pruebas; cambian el fondo y los retratos, que ahora
   son la mascota (de la corona a las rodillas, apoyada en la base del marco). */
#stepScreen-2 .step-stage-box.f2p-guide {
  border-color: var(--f2-stroke);
  background: radial-gradient(70% 36% at 50% 0%, rgba(56, 214, 255, .14), transparent 70%), radial-gradient(60% 30% at 50% 100%, rgba(155, 123, 255, .12), transparent 70%), var(--f2-deep);
  box-shadow: var(--f2-shadow-card);
}
#stepScreen-2 .steps-avatar > img {
  inset: 7% 7% 0;
  width: 86%;
  height: 93%;
  border-radius: 0;
  object-fit: cover;
  object-position: 50% 0;
}
/* Sin oro (queda para el pago y el premio) ni tipografía condensada: los nombres de los pasos, los
   números y el sello usan la letra de los titulares, como ya hacían los idiomas sin alfabeto latino
   (mismas medidas, que son las que caben a 360 px en alemán y finés). */
#stepScreen-2 {
  --steps-gold: var(--f2-mint);
  --steps-font: var(--font-display);
  --steps-case: none;
  --steps-track: -.01em;
  --steps-wide-track: .02em;
  --steps-name-size: 1.04rem;
  --steps-name-lh: 1.25;
  /* El sello cabe en una línea a 360 px en alemán («30 Minuten kostenlos · Ohne Registrierung»). */
  --steps-seal-size: clamp(.68rem, 3.1vw, .84rem);
}
@media (min-width: 761px) {
  #stepScreen-2 { --steps-name-size: 1.16rem; }
}
/* Fuera del recorrido de la prueba el contador de pasos va oculto: sin él no queda una cabecera vacía. */
#stepScreen-2 .stage-inner-hud:has(> .step-hud-brand[hidden]) { display: none; }
#stepScreen-2 .steps-name { font-weight: 800; }
#stepScreen-2 .steps-num { font: 800 .9rem/1 var(--font-display); }
#stepScreen-2 .steps-item:last-child .steps-avatar {
  border-color: rgba(121, 224, 183, .7);
  background: radial-gradient(circle at 50% 88%, rgba(121, 224, 183, .3), transparent 66%), linear-gradient(160deg, #173a44, #0d1a2b);
  box-shadow: 0 0 0 3px rgba(121, 224, 183, .12), 0 14px 28px -16px rgba(121, 224, 183, .6);
}
#stepScreen-2 .steps-item:last-child .steps-num { color: #04261b; }
#stepScreen-2 .steps-seal {
  border-color: rgba(121, 224, 183, .5);
  background: linear-gradient(135deg, rgba(121, 224, 183, .15), rgba(56, 214, 255, .06));
  color: #dcfbf0;
  font-weight: 700;
  box-shadow: 0 0 26px -12px rgba(121, 224, 183, .7);
}
@media (min-width: 761px) {
  #stepScreen-2 .steps-num { font-size: 1.05rem; }
}