/* PIXFINN — landing. Basado en el Figma "Portafolio" (frame MacBook Air - 1).
   Layout: bandas a todo lo ancho sobre azul noche; contenido en un contenedor de 1280px. */
:root {
  --night: #161f32;      /* fondo principal */
  --night-2: #1d2840;    /* superficies sobre el fondo */
  --cyan: #13b9e3;       /* acento PIXFINN */
  --gold: #dfad14;       /* biblioteca de Frank */
  --white: #ffffff;
  --ink: #0b0f18;        /* texto sobre blanco */
  --muted: rgba(255, 255, 255, .78);
  --glow: rgba(255, 255, 255, .56);

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --container: 1280px;
  --gutter: clamp(16px, 5.6vw, 72px);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .hero__fx { display: none; }
}
body {
  margin: 0;
  background: var(--night);
  color: var(--white);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.4;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
html { overflow-x: clip; }
main > section { overflow-x: clip; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; line-height: 1.2; }
p { margin: 0; }
.accent { color: var(--cyan); }
.center { text-align: center; }

.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gutter), env(safe-area-inset-right, 0px));
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; text-decoration: none; border: 0; cursor: pointer;
  font-family: inherit; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible, a:focus-visible, summary:focus-visible, input:focus-visible {
  outline: 3px solid var(--cyan); outline-offset: 3px;
}
.btn--pill { height: 60px; min-width: 230px; padding-inline: 28px; border-radius: 40px; font-size: 17px; }
.btn--blue { background: var(--cyan); color: var(--white); }
.btn--blue:hover { box-shadow: 0 8px 24px rgba(19, 185, 227, .45); }
.btn--white { background: var(--white); color: #000; }
.btn--nav { height: 40px; padding-inline: 22px; border-radius: 11px; background: var(--cyan); color: var(--white); font-size: 17px; }

/* ---------- Hero ---------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 1000px;
  padding-bottom: 300px;
}
/* Capas animadas del hero: fondo (zoom lento + parallax), luciérnagas, Frank */
.hero__scene { position: absolute; inset: -24px; z-index: -3; transition: transform .6s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.hero__bg { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center top; animation: hero-zoom 26s ease-in-out infinite alternate; transform-origin: 60% 30%; }
@keyframes hero-zoom { from { transform: scale(1); } to { transform: scale(1.07); } }
.hero__fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.firefly {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); border-radius: 50%;
  background: var(--c); box-shadow: 0 0 6px 2px var(--c), 0 0 18px 4px var(--c);
  opacity: 0; animation: firefly-drift var(--d) ease-in-out var(--delay) infinite, firefly-blink calc(var(--d) / 3) ease-in-out var(--delay) infinite;
}
@keyframes firefly-drift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(var(--dx), calc(var(--dy) * -1)); }
  50%  { transform: translate(calc(var(--dx) * -0.6), calc(var(--dy) * -1.8)); }
  75%  { transform: translate(calc(var(--dx) * 0.8), calc(var(--dy) * -0.6)); }
  100% { transform: translate(0, 0); }
}
@keyframes firefly-blink { 0%, 100% { opacity: 0; } 40%, 60% { opacity: .9; } }
.hero::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .36); z-index: -2; }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 0; }
.nav__logo img { width: 230px; height: auto; margin-block: 28px; }
.nav__links { display: flex; align-items: center; gap: 36px; font-weight: 700; font-size: 17px; }
.nav__links a:not(.btn) { text-decoration: none; }
.nav__links a:not(.btn):hover { color: var(--cyan); }
.hero__content { text-align: center; padding-top: 50px; text-shadow: 0 2px 12px rgba(0, 0, 0, .55); }
.hero h1 { font-size: clamp(30px, 4.2vw, 43px); font-weight: 700; max-width: 719px; margin-inline: auto; }
.hero__sub { font-size: clamp(19px, 2.6vw, 30px); font-weight: 300; max-width: 593px; margin: 38px auto 0; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 22px 52px; justify-content: center; margin-top: 18px; }
.hero__frank-wrap { position: absolute; left: 132px; bottom: 199px; z-index: 1; transition: transform .6s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.hero__frank-btn { display: block; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 12px; }
.hero__frank { width: 128px; max-width: none; transform-origin: 50% 100%; animation: frank-idle 3.2s ease-in-out infinite; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }
@keyframes frank-idle {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1, 1); }
  50%      { transform: translateY(-6px) rotate(-1.5deg) scale(1.01, .995); }
}
.hero__frank-btn.is-jumping .hero__frank { animation: frank-jump .75s cubic-bezier(.3,.6,.3,1) 1; }
@keyframes frank-jump {
  0%   { transform: translateY(0) scale(1, 1); }
  15%  { transform: translateY(4px) scale(1.08, .9); }
  45%  { transform: translateY(-90px) scale(.95, 1.06) rotate(-6deg); }
  70%  { transform: translateY(0) scale(1.06, .92); }
  85%  { transform: translateY(-10px) scale(.99, 1.01); }
  100% { transform: translateY(0) scale(1, 1); }
}

/* ---------- Nosotros ---------- */
.about { padding-block: 90px 110px; }
.about__grid { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); align-items: start; gap: 32px; }
.about__text { min-width: 0; display: grid; gap: 24px; padding-top: 0; }
.about h2 { font-size: clamp(28px, 3.3vw, 39px); font-weight: 700; margin-bottom: 4px; }
.about p { font-size: clamp(17px, 1.7vw, 21px); font-weight: 500; max-width: 595px; }
.about__stand { width: 100%; max-width: 620px; justify-self: end; margin-top: 40px; }

/* ---------- Biblioteca ---------- */
.library { position: relative; padding-block: 80px 120px; }
.library h2 { font-size: clamp(32px, 3.6vw, 45px); font-weight: 700; }
.library__sub { font-size: clamp(24px, 2.8vw, 35px); font-weight: 500; margin-top: 8px; }
.library__peek { position: absolute; top: 20px; left: calc(50% + 166px); width: 596px; max-width: none; pointer-events: none; }
.library__dragon { position: absolute; top: 640px; left: calc(50% + 2px); width: 1180px; max-width: none; pointer-events: none; z-index: 1; }
/* Frank saludando (se mece desde los pies) y el dragón respirando */
.library__peek { transform-origin: 47.5% 95%; animation: peek-sway 3.4s ease-in-out infinite; }
@keyframes peek-sway {
  0%, 100% { rotate: 0deg; translate: 0 0; }
  30%      { rotate: -3deg; translate: 0 -6px; }
  60%      { rotate: 1.5deg; translate: 0 -2px; }
}
.library__dragon { transform-origin: 51.5% 95%; animation: dragon-breathe 4.2s ease-in-out infinite; }
@keyframes dragon-breathe {
  0%, 100% { scale: 1 1; rotate: 0deg; }
  50%      { scale: 1.015 1.035; rotate: -1.2deg; }
}
.games {
  list-style: none; margin: 110px auto 0; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 48px 53px;
  max-width: 952px; position: relative; z-index: 2;
}
.games li { width: 282px; max-width: 100%; animation: card-float 4s ease-in-out infinite; }
.games li:nth-child(2) { animation-delay: -.8s; }
.games li:nth-child(3) { animation-delay: -1.6s; }
.games li:nth-child(4) { animation-delay: -2.4s; }
.games li:nth-child(5) { animation-delay: -3.2s; }
@keyframes card-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.games { perspective: 900px; }
.game { display: grid; gap: 12px; text-decoration: none; }
.game__cover {
  position: relative; display: block; border-radius: 20px; overflow: hidden;
  aspect-ratio: 282 / 327; background: #d9d9d9;
  transition: transform .2s ease, box-shadow .2s ease;
}
.game__cover img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
/* Destello que cruza cada portada, uno tras otro */
.game__cover::after {
  content: ""; position: absolute; inset: -20% auto -20% -60%; width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-18deg); pointer-events: none;
  animation: cover-shine 6s ease-in-out infinite; animation-delay: var(--shine, 0s);
}
.games li:nth-child(2) .game__cover { --shine: .6s; }
.games li:nth-child(3) .game__cover { --shine: 1.2s; }
.games li:nth-child(4) .game__cover { --shine: 1.8s; }
.games li:nth-child(5) .game__cover { --shine: 2.4s; }
@keyframes cover-shine { 0% { left: -60%; } 22%, 100% { left: 130%; } }
.game__play {
  position: absolute; left: 50%; bottom: 18px; transform: translate(-50%, 8px);
  background: var(--cyan); color: var(--white); font-weight: 800; font-size: 16px;
  padding: 10px 26px; border-radius: 40px; opacity: 0; transition: opacity .2s ease, transform .2s ease;
}
.game__cover { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; }
.game:hover .game__cover, .game:focus-visible .game__cover {
  transform: translateY(-6px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(1.03);
  box-shadow: 0 16px 40px rgba(19, 185, 227, .45), 0 0 0 3px var(--cyan);
}
.game.is-tilting .game__cover { transition: transform .08s linear, box-shadow .2s ease; }
.game:hover .game__play, .game:focus-visible .game__play { opacity: 1; transform: translate(-50%, 0); }
.game__name { font-size: 24px; font-weight: 500; padding-left: 18px; }
/* Juego "Coming soon": portada apagada con cinta, sin enlace */
.game--soon { cursor: default; }
.game--soon .game__cover img { filter: grayscale(.55) brightness(.6); }
.game__soon {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; rotate: -8deg;
  padding: 10px 22px; border-radius: 10px; white-space: nowrap;
  background: var(--gold); color: var(--night); font-weight: 800; font-size: 20px; letter-spacing: .06em; text-transform: uppercase;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45), 0 0 18px rgba(223, 173, 20, .55);
  animation: soon-pulse 2.4s ease-in-out infinite;
}
@keyframes soon-pulse { 0%, 100% { scale: 1; } 50% { scale: 1.06; } }
.game--soon .game__name { opacity: .75; }
@media (hover: none) { .game__play { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- Cómo funciona ---------- */
.steps { padding-block: 60px 100px; }
.steps__title { font-size: clamp(34px, 4.2vw, 53px); font-weight: 800; }
.steps__list {
  list-style: none; padding: 0; margin: 40px 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px 68px;
}
.step { display: grid; justify-items: start; align-content: start; min-width: 0; }
.step__coin {
  width: 109px; justify-self: center; margin-bottom: 29px;
  /* flota, gira como moneda de videojuego cada pocos segundos y brilla; cada una con su desfase */
  animation:
    coin-float 2.6s ease-in-out var(--delay, 0s) infinite,
    coin-spin 4.8s cubic-bezier(.45,.05,.35,1) var(--delay, 0s) infinite,
    coin-glow 2.6s ease-in-out var(--delay, 0s) infinite;
}
.step:nth-child(2) .step__coin { --delay: .35s; }
.step:nth-child(3) .step__coin { --delay: .7s; }
.step:nth-child(4) .step__coin { --delay: 1.05s; }
.step:hover .step__coin {
  animation:
    coin-float 2.6s ease-in-out var(--delay, 0s) infinite,
    coin-spin-fast .6s linear infinite,
    coin-glow 2.6s ease-in-out var(--delay, 0s) infinite;
}
@keyframes coin-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes coin-spin {
  0%, 62% { rotate: y 0deg; }
  82%     { rotate: y 360deg; }
  100%    { rotate: y 360deg; }
}
@keyframes coin-spin-fast { from { rotate: y 0deg; } to { rotate: y 360deg; } }
@keyframes coin-glow {
  0%, 100% { filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .35)) drop-shadow(0 0 0 rgba(255, 210, 60, 0)); }
  50%      { filter: drop-shadow(0 14px 10px rgba(0, 0, 0, .25)) drop-shadow(0 0 14px rgba(255, 210, 60, .55)); }
}
.step__img { width: 230px; aspect-ratio: 230 / 217; object-fit: cover; border-radius: 15px; }
.step p { font-size: clamp(20px, 2vw, 26px); font-weight: 800; margin-top: 28px; max-width: 235px; }

/* ---------- Comparativa ---------- */
.compare { padding-block: 60px 120px; }
.compare__title { font-size: clamp(26px, 2.9vw, 37px); font-weight: 800; max-width: 1007px; margin-inline: auto; }
.compare__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 427px)); justify-content: center; gap: 40px 129px; margin-top: 46px; }
.plan {
  --c: var(--gold);
  border: 4px solid var(--c); border-radius: 13px;
  box-shadow: 0 0 8.5px var(--glow), inset 0 0 8.5px var(--glow), 0 0 2px var(--white);
  padding: 77px 33px 24px; display: grid; justify-items: center; align-content: start; min-width: 0;
}
.plan--blue { --c: var(--cyan); --glow: rgba(255, 255, 255, .88); }
.plan__icon { width: 163px; filter: drop-shadow(0 0 8.5px rgba(255, 255, 255, .46)); }
/* Rayo: destella como carga de energía. Engrane: gira lento y acelera con el mouse */
.plan--gold .plan__icon { animation: bolt-flash 3.6s ease-in-out infinite; }
@keyframes bolt-flash {
  0%, 100% { scale: 1; filter: drop-shadow(0 0 8.5px rgba(255, 255, 255, .46)); }
  8%       { scale: 1.08; filter: drop-shadow(0 0 22px rgba(223, 173, 20, .95)) brightness(1.25); }
  12%      { scale: 1; filter: drop-shadow(0 0 8.5px rgba(255, 255, 255, .46)); }
  16%      { scale: 1.05; filter: drop-shadow(0 0 18px rgba(223, 173, 20, .8)) brightness(1.15); }
  24%      { scale: 1; filter: drop-shadow(0 0 8.5px rgba(255, 255, 255, .46)); }
}
.plan--gold:hover .plan__icon { animation-duration: 1.2s; }
.plan--blue .plan__icon { animation: gear-spin 14s linear infinite; }
.plan--blue:hover .plan__icon { animation-duration: 3s; }
@keyframes gear-spin { to { rotate: 360deg; } }
.plan h3 { font-size: clamp(26px, 2.5vw, 32px); font-weight: 800; text-align: center; margin-top: 70px; }
.plan ul { margin: 14px 0 0; padding-left: 26px; display: grid; gap: 20px; font-size: 17px; font-weight: 800; justify-self: stretch; }
.plan ul { min-height: 250px; }
.btn--outline {
  margin-top: 70px; width: 273px; max-width: 100%; height: 57px; border: 3px solid var(--c);
  background: transparent; color: var(--c); font-size: 19px; font-weight: 800;
}
.btn--outline:hover { background: var(--c); color: var(--night); }

/* ---------- FAQ ---------- */
.faq { position: relative; padding-block: 100px 120px; }
.faq__title { font-size: clamp(36px, 4.1vw, 52px); font-weight: 800; }
.faq__frank { position: absolute; top: 40px; left: calc(50% + 150px); width: 895px; max-width: none; transform: rotate(-29.59deg); transform-origin: center; pointer-events: none; }
.faq__list {
  list-style: none; counter-reset: q; padding: 0; margin: 24px 0 0;
  display: grid; gap: 41px; max-width: 846px; position: relative; z-index: 1;
}
.faq__list li { counter-increment: q; }
.faq details {
  border: 1px solid var(--cyan); border-radius: 15px; background: rgba(22, 31, 50, .82);
  min-height: 120px; padding: 26px 32px; display: block;
}
.faq summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start;
  color: var(--cyan); font-weight: 800; font-size: clamp(20px, 2.6vw, 33px); line-height: 1.2;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: counter(q) "."; }
.faq summary::after { content: "+"; font-weight: 400; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq__a { margin-top: 16px; font-size: 18px; font-weight: 500; color: var(--muted); padding-left: 40px; max-width: 65ch; }

/* ---------- Validado ---------- */
.proof { position: relative; padding-block: 60px 140px; }
.proof__grid { display: grid; grid-template-columns: minmax(0, 546px) minmax(0, 593px); justify-content: space-between; gap: 40px; align-items: center; }
.proof h2 { font-size: clamp(34px, 3.8vw, 48px); font-weight: 700; }
.proof__photo { margin: 0; }
.proof__photo img { width: 100%; aspect-ratio: 593 / 391; object-fit: cover; border-radius: 22px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.proof p { font-size: clamp(20px, 2.3vw, 29px); max-width: 486px; margin-top: 24px; }
.proof__deco { position: absolute; left: 9px; bottom: -60px; width: 490px; max-width: 70vw; z-index: 2; pointer-events: none; }

/* ---------- Contacto ---------- */
.contact { position: relative; isolation: isolate; padding-block: 78px 78px; }
.contact__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center bottom; z-index: -1; }
.contact__card {
  background: var(--white); color: var(--ink); border-radius: 25px;
  max-width: 1073px; margin-left: auto; margin-right: auto;
  padding: 15px 70px 15px 48px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 40px; align-items: start;
}
.contact__text { padding-top: 44px; }
.contact h2 { font-size: clamp(32px, 3.8vw, 48px); font-weight: 700; max-width: 479px; }
.contact__text p { font-size: clamp(19px, 2vw, 26px); margin-top: 20px; max-width: 548px; }
.form { background: var(--night); color: var(--white); border-radius: 12px; padding: 50px 32px 31px 25px; display: grid; gap: 0; }
.form label { font-size: 21px; font-weight: 700; margin-bottom: 7px; }
.form input {
  height: 31px; border: 0; border-radius: 0; background: var(--white); color: var(--ink);
  font: 500 16px var(--font); padding: 0 10px; margin-bottom: 26px; width: 100%;
}
.form input[aria-invalid="true"] { box-shadow: 0 0 0 2px #ff6b6b; }
.btn--submit {
  justify-self: center; margin-top: 18px; width: 200px; height: 47px; border-radius: 10px;
  background: var(--cyan); color: var(--white); font-size: 24px;
}
.form__status { min-height: 1.4em; margin-top: 12px; font-size: 15px; text-align: center; }

/* ---------- Footer ---------- */
.footer { padding-block: 22px; font-size: 14px; color: var(--muted); text-align: center; }

/* =================== Responsive =================== */
@media (max-width: 1100px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__stand { width: 100%; max-width: 755px; margin: 24px auto 0; }
  .steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .step { justify-items: center; text-align: center; }
  .step p { max-width: 300px; }
  .library__dragon { opacity: .35; }
}

@media (max-width: 900px) {
  .compare__grid { grid-template-columns: minmax(0, 427px); }
  .plan ul { min-height: 0; }
  .plan h3, .btn--outline { margin-top: 36px; }
  .plan { padding-top: 44px; }
  .proof__grid { grid-template-columns: 1fr; }
  .contact__card { grid-template-columns: 1fr; padding: 32px 24px 24px; }
  .contact__text { padding-top: 0; }
  .faq__frank { width: 520px; left: auto; right: -200px; top: 60px; opacity: .3; }
  .library__peek { width: 360px; left: auto; right: -140px; opacity: .5; }
}

@media (max-width: 720px) {
  .nav { flex-wrap: wrap; padding-top: 8px; }
  .nav__logo img { width: 140px; margin-block: 14px; }
  .nav__links { gap: 16px; font-size: 15px; }
  .nav__links a:not(.btn) { display: none; }
  .btn--nav { font-size: 14px; height: 42px; padding-inline: 16px; }
  .hero { min-height: 0; padding-bottom: 220px; }
  .hero__content { padding-top: 24px; }
  .hero__sub { margin-top: 22px; }
  .hero__ctas { margin-top: 28px; gap: 14px; }
  .btn--pill { min-width: 0; width: 100%; max-width: 320px; height: 54px; }
  .hero__frank-wrap { left: 18px; bottom: 24px; }
  .hero__frank { width: 76px; }
  .about { padding-block: 56px 64px; }
  .library { padding-block: 56px 72px; }
  .library__dragon { display: none; }
  .games { margin-top: 48px; gap: 32px 20px; }
  .games li { width: calc(50% - 10px); }
  .game__name { font-size: 18px; padding-left: 4px; }
  .steps__list { grid-template-columns: 1fr; }
  .faq details { padding: 20px 18px; min-height: 0; }
  .faq__list { gap: 18px; }
  .faq__a { padding-left: 0; font-size: 16px; }
  .faq__frank { display: none; }
  .library__peek { display: none; }
  .proof { padding-bottom: 120px; }

  /* ---- Ajustes finos para celular ---- */
  /* Hero: velo más oscuro arriba para que el texto se lea sobre el escenario */
  .hero::before { background: linear-gradient(180deg, rgba(5, 10, 22, .78) 0%, rgba(5, 10, 22, .55) 55%, rgba(5, 10, 22, .15) 100%); }
  .hero h1 { font-size: 30px; }
  .hero__sub { font-size: 18px; }
  .hero { padding-bottom: 200px; }

  /* Juegos: botón "Jugar" más discreto en pantallas táctiles */
  .game__play { font-size: 13px; padding: 6px 16px; bottom: 10px; }
  .game__soon { font-size: 14px; padding: 7px 14px; }
  .game__name { font-size: 16px; }
  .games li { animation: none; }

  /* Cómo funciona: 2 columnas compactas en vez de un paso por pantalla */
  .steps { padding-block: 40px 64px; }
  .steps__title { font-size: 30px; }
  .steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; margin-top: 28px; }
  .step__coin { width: 58px; margin-bottom: 10px; }
  .step__img { width: 100%; border-radius: 12px; }
  .step p { font-size: 15px; margin-top: 12px; line-height: 1.35; }

  /* Comparativa: íconos y espacios más compactos */
  .compare { padding-block: 40px 64px; }
  .compare__title { font-size: 24px; }
  .compare__grid { margin-top: 28px; gap: 28px; }
  .plan { padding: 28px 20px 24px; }
  .plan__icon { width: 96px; }
  .plan h3 { margin-top: 18px; font-size: 24px; }
  .plan ul { gap: 12px; font-size: 15px; }
  .btn--outline { margin-top: 26px; height: 52px; font-size: 17px; }

  /* FAQ y Validado: menos aire entre secciones */
  .faq { padding-block: 48px 40px; }
  .faq__title { font-size: 34px; }
  .faq summary { font-size: 18px; }
  .proof { padding-block: 40px 110px; }
  .proof__grid { gap: 24px; }
  .proof h2 { font-size: 30px; }
  .proof p { font-size: 18px; margin-top: 14px; }
  .proof__deco { width: 260px; bottom: -40px; }

  /* Contacto: campos grandes y cómodos para el dedo */
  .contact { padding-block: 48px; }
  .contact h2 { font-size: 30px; }
  .contact__text p { font-size: 17px; margin-top: 12px; }
  .contact__card { padding: 24px 18px 18px; gap: 22px; border-radius: 20px; }
  .form { padding: 26px 18px 22px; }
  .form label { font-size: 16px; }
  .form input { height: 46px; border-radius: 8px; font-size: 16px; margin-bottom: 18px; }
  .btn--submit { width: 100%; height: 52px; font-size: 20px; margin-top: 6px; }
}

@media (max-width: 330px) {
  .games li { width: 100%; max-width: 282px; }
  .steps__list { grid-template-columns: 1fr; }
}