:root {
  --ink: #1c1b19;
  --ink-2: #242320;
  --ink-soft: #5e5a54;
  --paper: #f5f3ee;
  --white: #fffefa;
  --coral: #e17464;
  --coral-light: #ef8b7c;
  --amber: #f3b33f;
  --blue: #4d8dba;
  --green: #72bd58;
  --line: rgba(28, 27, 25, 0.14);
  --line-light: rgba(255, 254, 250, 0.16);
  --shell: 1120px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body,
button {
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
}

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

h1,
h2,
p {
  margin-top: 0;
}

.page-shell {
  width: min(calc(100% - 40px), var(--shell));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 11000;
  padding: 10px 14px;
  color: var(--ink);
  background: var(--white);
  border-radius: 10px;
  font-weight: 700;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: none;
}

:focus-visible {
  outline: 3px solid rgba(225, 116, 100, 0.64);
  outline-offset: 4px;
}

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 30;
  color: var(--ink);
}

.header-inner {
  min-height: 76px;
  padding-top: max(8px, env(safe-area-inset-top));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
}

.brand img {
  width: 118px;
  height: auto;
}

.login-link {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
  transition: color 180ms ease;
}

.login-link:hover {
  color: var(--ink);
}

/* Portada */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 680px;
  overflow: hidden;
  color: var(--ink);
  background: var(--paper);
  isolation: isolate;
}

.hero-glow {
  position: absolute;
  width: 520px;
  height: 520px;
  right: -340px;
  bottom: -120px;
  z-index: -1;
  border-radius: 50%;
  background: var(--coral);
  filter: blur(120px);
  opacity: 0.22;
  pointer-events: none;
}

.hero-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(28, 27, 25, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28, 27, 25, 0.055) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: linear-gradient(to bottom, transparent 3%, #000 34%, transparent 92%);
  opacity: 0.5;
}

.hero-inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: max(86px, calc(env(safe-area-inset-top) + 70px));
  padding-bottom: max(42px, calc(env(safe-area-inset-bottom) + 28px));
}

/* Sin parallax en móvil: el hero es una columna apretada y desplazar el texto
   sobre una foto que se queda quieta los encimaba al hacer scroll. */
.hero-copy,
.hero-cta {
  position: relative;
  z-index: 5;
  max-width: 620px;
}

/* En móvil el CTA cierra el hero: la foto de arriba absorbe el espacio libre
   y lo empuja al fondo de la pantalla. */
.hero-cta {
  flex: 0 0 auto;
  /* El botón es inline-flex con max-width, así que en teléfonos más anchos que
     ~382px se quedaba pegado a la izquierda en vez de centrado. */
  text-align: center;
}

/* La foto se desborda por abajo y el hero la recortaba en seco, partiendo la
   tarjeta amarilla justo en la costura con la sección siguiente. Este
   desvanecido la disuelve en el beige antes del borde: como la sección de
   abajo es del mismo color, la costura desaparece. Va sobre la foto (z-index
   2) pero debajo del CTA (5), así que también le devuelve legibilidad a la
   nota chica. */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  height: 148px;
  background: linear-gradient(
    to bottom,
    rgba(245, 243, 238, 0) 0%,
    rgba(245, 243, 238, 0.62) 30%,
    rgba(245, 243, 238, 0.92) 62%,
    var(--paper) 100%
  );
  pointer-events: none;
}

.hero h1,
.story-scene h2,
.price-copy h2 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  letter-spacing: -0.06em;
}

.hero h1 {
  max-width: 640px;
  margin-bottom: 10px;
  font-size: clamp(38px, 11.4vw, 56px);
  line-height: 0.92;
}

.hero h1 span {
  display: block;
  color: var(--coral);
}

.hero-lede {
  max-width: 510px;
  margin-bottom: 18px;
  color: var(--ink-soft);
  font-size: clamp(16px, 4.45vw, 19px);
  line-height: 1.5;
}

.button {
  min-height: 56px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border: 0;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  transition: background-color 180ms ease, transform 180ms ease;
}

.button > span {
  font-size: 20px;
  line-height: 1;
}

.button:hover {
  transform: translateY(-2px);
}

.button-primary {
  color: var(--ink);
  background: var(--coral);
}

.button-primary:hover {
  background: var(--coral-light);
}

.hero .button {
  width: 100%;
  max-width: 342px;
}

.button-note {
  max-width: 342px;
  margin: 13px auto 0;
  color: rgba(28, 27, 25, 0.46);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-align: center;
}

/* Foto real de tres pases en Wallet. La imagen ya trae su propia sombra, así
   que NO lleva drop-shadow de CSS: al vivir sobre una capa compositada el
   navegador recortaba el filtro en un rectángulo visible. Tampoco entra al
   parallax del scroll — se queda quieta a propósito. */
/* En móvil la foto arranca justo debajo del lede y crece a su tamaño natural:
   se desborda por abajo y pasa POR DETRÁS del CTA (que va en z-index 5). El
   flex la deja rebasar su caja en vez de encogerla. */
.hero-deck {
  position: relative;
  z-index: 2;
  /* Margen negativo: se come el espacio que deja el lede para arrancar casi
     pegada al texto. Cada pixel que sube es un pixel más que se ve de las
     tarjetas de abajo antes del desvanecido. */
  margin: -22px -14px 0;
  flex: 1 1 auto;
  min-height: 0;
}

.hero-deck picture {
  display: block;
}

.hero-deck img {
  width: 100%;
  height: auto;
}

.wallet-pass header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.wallet-pass small,
.business-control small,
.palette small {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.1em;
}

.wallet-pass header small {
  margin-bottom: 3px;
  color: rgba(28, 27, 25, 0.52);
}

.wallet-pass header strong {
  display: block;
  font: 700 14px "Space Grotesk", sans-serif;
}

.wallet-pass header b {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font-size: 8px;
}

/* En móvil la foto se desborda por abajo y esa fuga ya dice que hay más
   contenido; la pista encima de las tarjetas solo estorbaba la lectura. */
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: max(12px, calc(env(safe-area-inset-bottom) + 6px));
  z-index: 7;
  min-height: 34px;
  display: none;
  align-items: center;
  gap: 8px;
  color: rgba(28, 27, 25, 0.5);
  font-size: 10px;
  font-weight: 700;
  transform: translateX(-50%);
  opacity: var(--scroll-cue-opacity, 1);
  white-space: nowrap;
}

.scroll-cue i {
  font-style: normal;
  font-size: 15px;
}

html[data-motion="on"] .hero-copy,
html[data-motion="on"] .site-header {
  animation: hero-enter 720ms cubic-bezier(0.2, 0.78, 0.28, 1) both;
}

html[data-motion="on"] .site-header {
  animation-delay: 40ms;
}

@keyframes hero-enter {
  from { opacity: 0; translate: 0 20px; }
  to { opacity: 1; translate: 0 0; }
}

/* Historia fijada */
.story {
  position: relative;
  height: 270vh;
  height: 270svh;
  color: var(--ink);
  background: var(--paper);
}

.story-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 680px;
  overflow: hidden;
}

.story-wash {
  position: absolute;
  width: 540px;
  height: 540px;
  left: -390px;
  top: 18%;
  border-radius: 50%;
  background: rgba(77, 141, 186, 0.18);
  filter: blur(110px);
  pointer-events: none;
}

.story-progress {
  position: absolute;
  top: 14%;
  right: 11px;
  bottom: 14%;
  z-index: 8;
  width: 2px;
  overflow: hidden;
  background: rgba(28, 27, 25, 0.1);
  border-radius: 99px;
}

.story-progress span {
  display: block;
  width: 100%;
  height: 0;
  background: var(--coral);
  border-radius: inherit;
}

.story-layout {
  position: relative;
  height: 100%;
  padding-top: max(68px, calc(env(safe-area-inset-top) + 42px));
  padding-bottom: max(20px, calc(env(safe-area-inset-bottom) + 12px));
  display: grid;
  grid-template-rows: 158px minmax(0, 1fr);
  gap: 8px;
}

.story-copy {
  position: relative;
  z-index: 6;
  height: 158px;
}

.story-kicker,
.eyebrow {
  margin-bottom: 14px;
  color: rgba(28, 27, 25, 0.46);
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.story-kicker span {
  color: var(--coral);
}

.story-scene {
  position: absolute;
  inset: 30px 0 auto;
  max-width: 360px;
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 300ms ease, transform 360ms cubic-bezier(0.2, 0.78, 0.28, 1);
  pointer-events: none;
}

.story-scene.is-active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
}

.story-scene h2 {
  margin-bottom: 8px;
  font-size: clamp(48px, 13vw, 62px);
  line-height: 0.95;
}

.story-scene p {
  max-width: 330px;
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.52;
}

.story-visual {
  position: relative;
  width: min(100%, 370px);
  height: 100%;
  max-height: 490px;
  margin-inline: auto;
  align-self: center;
  isolation: isolate;
}

.orbit {
  position: absolute;
  left: 50%;
  top: 49%;
  z-index: -2;
  border: 1px solid rgba(28, 27, 25, 0.09);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(var(--orbit-r, 0deg));
  will-change: transform;
}

.orbit::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  right: 15%;
  top: 5%;
  background: var(--coral);
  border-radius: 50%;
}

.orbit-one {
  width: 390px;
  height: 390px;
}

.orbit-two {
  width: 292px;
  height: 292px;
  transform: translate(-50%, -50%) rotate(var(--orbit-r-2, 0deg));
}

.orbit-two::after {
  width: 7px;
  height: 7px;
  right: auto;
  left: 3%;
  top: 60%;
  background: var(--blue);
}

.device-frame {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 276px;
  height: 378px;
  overflow: hidden;
  color: var(--white);
  background: #090909;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 36px;
  box-shadow: 0 34px 80px rgba(28, 27, 25, 0.22);
  transform: translate3d(calc(-50% + var(--device-x, 0px)), calc(-50% + var(--device-y, 0px)), 0) scale(var(--device-scale, 0.94)) rotate(var(--device-r, -2deg));
  will-change: transform;
}

.device-frame::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  z-index: 6;
  width: 72px;
  height: 20px;
  background: #000;
  border-radius: 99px;
  transform: translateX(-50%);
}

.device-top {
  height: 43px;
  padding: 14px 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.78);
  font-size: 8px;
}

.device-top strong {
  margin-left: auto;
  margin-right: 8px;
  font-size: 8px;
}

.device-top i {
  width: 18px;
  height: 6px;
  background: linear-gradient(90deg, currentColor 20%, transparent 20% 34%, currentColor 34% 62%, transparent 62% 76%, currentColor 76%);
  opacity: 0.7;
}

.palette {
  position: absolute;
  right: 18px;
  bottom: 17px;
  left: 18px;
  height: 42px;
  padding: 0 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 13px;
  opacity: var(--palette-opacity, 1);
  transform: translateY(var(--palette-y, 0px));
  transition: opacity 220ms ease;
}

.palette span {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-radius: 50%;
}

.palette span:nth-child(1) { background: var(--amber); }
.palette span:nth-child(2) { background: var(--blue); }
.palette span:nth-child(3) { background: var(--coral); }
.palette small { margin-left: auto; font-size: 7px; }

.wallet-pass {
  position: absolute;
  top: 54px;
  right: 13px;
  left: 13px;
  z-index: 2;
  min-height: 250px;
  padding: 20px;
  color: var(--ink);
  background: var(--amber);
  border-radius: 22px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
  transform: translateY(var(--pass-y, 0px)) rotate(var(--pass-r, 0deg));
  transition: box-shadow 220ms ease;
  will-change: transform;
}

.wallet-pass.is-pulsing {
  animation: pass-pulse 480ms cubic-bezier(0.2, 0.78, 0.28, 1);
}

@keyframes pass-pulse {
  50% { box-shadow: 0 24px 54px rgba(243, 179, 63, 0.42); scale: 1.015; }
}

.pass-count {
  margin: 26px 0 16px;
}

.pass-count small {
  margin-bottom: 3px;
  color: rgba(28, 27, 25, 0.48);
}

.pass-count strong {
  display: block;
  font: 700 31px/1 "Space Grotesk", sans-serif;
  letter-spacing: -0.05em;
}

.stamp-grid {
  padding: 13px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 9px;
  background: rgba(255, 254, 250, 0.28);
  border-radius: 14px;
}

.stamp-grid i {
  aspect-ratio: 1;
  display: block;
  border: 1.5px solid rgba(28, 27, 25, 0.38);
  border-radius: 50%;
  transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.stamp-grid i.filled {
  background: var(--ink);
  border-color: var(--ink);
}

.stamp-grid i.just-filled {
  animation: stamp-pop 520ms cubic-bezier(0.2, 0.86, 0.36, 1.25);
}

@keyframes stamp-pop {
  45% { transform: scale(1.32); }
}

.pass-code {
  width: 54%;
  height: 21px;
  margin: 16px auto 0;
  background: repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 4px, var(--ink) 4px 5px, transparent 5px 8px);
  border: 7px solid var(--white);
  border-radius: 5px;
}

.wallet-update {
  position: absolute;
  right: 14px;
  bottom: 14px;
  left: 14px;
  z-index: 4;
  min-height: 44px;
  padding: 8px 9px;
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--white);
  background: #1a1a1a;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 13px;
  opacity: var(--notification-opacity, 0);
  transform: translateY(var(--notification-y, 14px));
  transition: opacity 220ms ease;
}

.wallet-update.is-live {
  opacity: 1;
}

.wallet-update > span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  background: var(--coral);
  border-radius: 8px;
  font: 700 11px "Space Grotesk", sans-serif;
}

.wallet-update p {
  margin: 0;
}

.wallet-update small {
  display: block;
  color: rgba(255, 254, 250, 0.42);
  font-size: 8px;
}

.wallet-update strong {
  display: block;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
}

.qr-ticket {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 154px;
  height: 190px;
  padding: 16px;
  overflow: hidden;
  color: var(--ink);
  background: var(--white);
  border: 1px solid rgba(28, 27, 25, 0.08);
  border-radius: 20px;
  box-shadow: 0 24px 54px rgba(28, 27, 25, 0.14);
  opacity: var(--qr-opacity, 0);
  transform: translate3d(calc(-50% + var(--qr-x, 74px)), calc(-50% + var(--qr-y, 0px)), 0) rotate(var(--qr-r, 8deg));
  will-change: transform, opacity;
}

.qr-ticket small {
  display: block;
  font: 600 6px "JetBrains Mono", monospace;
  letter-spacing: 0.1em;
  text-align: center;
}

.qr-ticket > span {
  display: block;
  margin-top: 9px;
  color: var(--coral);
  font: 700 12px "Space Grotesk", sans-serif;
  text-align: center;
}

.qr-code {
  position: relative;
  width: 104px;
  height: 104px;
  margin: 12px auto 0;
  background:
    repeating-linear-gradient(90deg, var(--ink) 0 5px, transparent 5px 9px, var(--ink) 9px 12px, transparent 12px 16px),
    repeating-linear-gradient(0deg, rgba(28, 27, 25, 0.72) 0 4px, transparent 4px 8px);
  border: 8px solid var(--white);
  outline: 1px solid rgba(28, 27, 25, 0.08);
}

.qr-code i {
  position: absolute;
  width: 24px;
  height: 24px;
  background: var(--white);
  border: 6px solid var(--ink);
}

.qr-code i:nth-child(1) { top: -3px; left: -3px; }
.qr-code i:nth-child(2) { top: -3px; right: -3px; }
.qr-code i:nth-child(3) { bottom: -3px; left: -3px; }

.scan-line {
  position: absolute;
  right: 14px;
  left: 14px;
  top: 52px;
  z-index: 4;
  height: 2px;
  background: var(--coral);
  box-shadow: 0 0 12px rgba(225, 116, 100, 0.65);
  opacity: 0;
}

.story-visual.is-scan-active .scan-line {
  animation: qr-scan 1.4s ease-in-out 2;
}

@keyframes qr-scan {
  0% { translate: 0 4px; opacity: 0; }
  15%, 85% { opacity: 1; }
  100% { translate: 0 100px; opacity: 0; }
}

.business-control {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: 210px;
  padding: 16px;
  color: var(--white);
  background: rgba(36, 35, 32, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(28, 27, 25, 0.24);
  opacity: var(--control-opacity, 0);
  transform: translate3d(calc(-50% + var(--control-x, -70px)), calc(-50% + var(--control-y, 92px)), 0) scale(var(--control-scale, 0.94));
  will-change: transform, opacity;
  pointer-events: none;
}

.story-visual.is-control-active .business-control {
  pointer-events: auto;
}

.control-person {
  display: grid;
  grid-template-columns: 34px 1fr 7px;
  align-items: center;
  gap: 9px;
}

.control-person > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: #f4d0c9;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 800;
}

.control-person p {
  margin: 0;
}

.control-person small,
.control-count small {
  margin-bottom: 2px;
  color: rgba(255, 254, 250, 0.38);
  font-size: 7px;
}

.control-person strong {
  display: block;
  font-size: 11px;
}

.control-person i {
  width: 7px;
  height: 7px;
  background: var(--green);
  border-radius: 50%;
}

.control-count {
  margin: 13px 0 12px;
  padding-top: 11px;
  border-top: 1px solid var(--line-light);
}

.control-count strong {
  font: 700 20px/1 "Space Grotesk", sans-serif;
}

.demo-action {
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ink);
  background: var(--amber);
  border: 0;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transition: background-color 160ms ease, transform 160ms ease;
}

.demo-action:hover {
  background: #ffc451;
  transform: translateY(-1px);
}

.demo-action span {
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: var(--white);
  background: var(--ink);
  border-radius: 50%;
  font-size: 14px;
}

/* Así funciona — recorrido editorial */
.how {
  position: relative;
  padding: 118px 0 84px;
  overflow: hidden;
  background: var(--paper);
}

.how-intro {
  margin-bottom: 62px;
}.how-kicker,
.how-chapter-label,
.how-step-number{
  font-family: "JetBrains Mono", monospace;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.how-kicker {
  margin-bottom: 18px;
  color: var(--coral);
  font-size: 11px;
}

.how-intro h2 {
  max-width: 900px;
  margin-bottom: 22px;
  font: 700 clamp(50px, 8.1vw, 94px)/0.94 "Space Grotesk", sans-serif;
  letter-spacing: -0.065em;
}

.how-intro h2 span {
  color: var(--coral);
}

.how-lede {
  max-width: 640px;
  margin-bottom: 0;
  color: var(--ink-soft);
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.55;
}

.how-chapters {
  margin-block: 0;
  padding: 0;
  display: grid;
  gap: 30px;
  list-style: none;
}

.how-chapter {
  position: relative;
  min-height: 720px;
  padding: clamp(28px, 5vw, 60px);
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(500px, 1.18fr);
  align-items: center;
  gap: clamp(30px, 5vw, 68px);
  overflow: hidden;
  border: 1px solid rgba(28, 27, 25, 0.08);
  border-radius: 38px;
  isolation: isolate;
}

.how-chapter::before {
  content: "";
  position: absolute;
  width: 460px;
  height: 460px;
  right: -220px;
  top: -250px;
  z-index: -1;
  border: 1px solid rgba(28, 27, 25, 0.11);
  border-radius: 50%;
}

.how-chapter-create { background: #e4edd6; }
.how-chapter-share { background: #7fa8d5; }
.how-chapter-return { background: #f4c35b; }

.how-copy {
  position: relative;
  z-index: 8;
}

.how-chapter-label {
  margin-bottom: 34px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: rgba(28, 27, 25, 0.58);
  font-size: 9px;
}

.how-chapter-label span {
  color: var(--ink);
}

.how-step {
  padding: 27px 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 14px;
  border-top: 1px solid rgba(28, 27, 25, 0.18);
}

.how-step:last-child {
  border-bottom: 1px solid rgba(28, 27, 25, 0.18);
}

.how-step-number {
  padding-top: 6px;
  color: rgba(28, 27, 25, 0.48);
  font-size: 9px;
}

.how-step h3 {
  max-width: 390px;
  margin: 0 0 10px;
  font: 700 clamp(32px, 3.3vw, 48px)/0.99 "Space Grotesk", sans-serif;
  letter-spacing: -0.055em;
}

.how-step p {
  max-width: 390px;
  margin: 0;
  color: rgba(28, 27, 25, 0.7);
  font-size: 14px;
  line-height: 1.55;
}

.how-stage {
  position: relative;
  min-height: 590px;
  align-self: stretch;
  isolation: isolate;
}

.how-stage::before {
  content: "";
  position: absolute;
  width: 430px;
  height: 430px;
  left: 50%;
  top: 50%;
  z-index: -2;
  background: rgba(255, 254, 250, 0.28);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.how-phone,
.how-scan-phone {
  position: absolute;
  overflow: hidden;
  color: var(--white);
  background: #0e0e0d;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 34px 72px rgba(28, 27, 25, 0.27);
}

.how-phone {
  width: 278px;
  height: 560px;
  border-radius: 42px;
}

.how-phone-video {
  width: 260px;
  height: auto;
  aspect-ratio: 1470 / 3000;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.how-screen-video,
.how-device-shot {
  position: absolute;
  left: 5.102%;
  top: 2.2%;
  z-index: 11;
  width: 89.796%;
  height: 95.6%;
  display: block;
  object-fit: cover;
  background: #f5f3ee;
  border-radius: 9.4% / 4.35%;
}

.how-video-island {
  position: absolute;
  /* Coordenadas del clip, convertidas a la ventana oficial de 1320 × 2868 px. */
  top: 3.395%;
  left: 31.274%;
  z-index: 13;
  width: 36.078%;
  height: 3.738%;
  background: #000;
  border-radius: 999px;
  pointer-events: none;
}

.how-device-bezel {
  position: absolute;
  inset: 0;
  z-index: 14;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
  filter: drop-shadow(0 34px 36px rgba(28, 27, 25, 0.27));
}

.how-phone.how-device-official,
.how-scan-phone.how-device-official {
  height: auto;
  aspect-ratio: 1470 / 3000;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.how-device-official .how-device-screen {
  position: absolute;
  left: 5.102%;
  top: 2.2%;
  z-index: 11;
  width: 89.796%;
  height: 95.6%;
  overflow: hidden;
  background: #0e0e0d;
  border-radius: 9.4% / 4.35%;
}

.how-device-official .how-camera-view {
  inset: 0;
  border-radius: inherit;
}

.how-video-replay {
  position: absolute;
  left: 50%;
  bottom: 18px;
  z-index: 16;
  min-height: 38px;
  padding: 0 15px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--white);
  background: rgba(14, 14, 13, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity 180ms ease, transform 220ms ease;
  backdrop-filter: blur(10px);
  cursor: pointer;
  white-space: nowrap;
}

.how-video-replay span {
  font-size: 15px;
  line-height: 1;
}

.how-phone-video.is-video-complete .how-video-replay,
html[data-data-saver="on"] .how-video-replay {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.how-phone-create {
  left: 9%;
  top: 13px;
  z-index: 4;
  transform: rotate(-4deg);
}

.how-poster {
  color: var(--ink);
  background: var(--white);
  box-shadow: 0 28px 62px rgba(28, 27, 25, 0.2);
}

.how-poster header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.how-poster header b {
  font: 700 18px "Space Grotesk", sans-serif;
  letter-spacing: -0.05em;
}

.how-poster header span {
  color: rgba(28, 27, 25, 0.52);
  font: 600 6px "JetBrains Mono", monospace;
  letter-spacing: 0.11em;
}

.how-poster > p {
  font: 700 27px/0.98 "Space Grotesk", sans-serif;
  letter-spacing: -0.05em;
}

.how-poster > p strong { color: var(--coral); }

.how-poster-small {
  position: absolute;
  right: 2%;
  bottom: 28px;
  z-index: 5;
  width: 255px;
  min-height: 330px;
  padding: 24px;
  border-radius: 4px;
  transform: rotate(5deg);
}

.how-poster-small > p { margin: 66px 0 35px; }

.how-download-chip,
.how-wallet-receipt,
.how-notification {
  position: absolute;
  z-index: 10;
  display: flex;
  align-items: center;
  color: var(--white);
  background: rgba(28, 27, 25, 0.95);
  box-shadow: 0 18px 42px rgba(28, 27, 25, 0.22);
}

.how-download-chip {
  right: 20%;
  bottom: 4px;
  min-width: 142px;
  padding: 11px 15px;
  gap: 10px;
  border-radius: 14px;
}

.how-download-chip > span,
.how-wallet-check {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--coral);
  border-radius: 50%;
  font-weight: 800;
}

.how-download-chip p,
.how-wallet-receipt p,
.how-notification p { margin: 0; }
.how-download-chip small,
.how-wallet-receipt small,
.how-notification small { display: block; color: rgba(255, 255, 255, 0.5); font-size: 7px; }
.how-download-chip strong,
.how-wallet-receipt strong { display: block; font-size: 11px; }

.how-poster-large {
  position: absolute;
  left: 1%;
  top: 27px;
  z-index: 2;
  width: 330px;
  min-height: 510px;
  padding: 30px;
  transform: rotate(-3deg);
}

.how-poster-large > p {
  margin: 88px 0 54px;
  font-size: 38px;
}
.how-poster-large > footer { margin-top: 30px; color: rgba(28, 27, 25, 0.55); font-size: 9px; font-weight: 700; text-align: center; }

.how-poster.how-poster-real {
  min-height: 0;
  padding: 0;
  aspect-ratio: 900 / 1169;
  overflow: hidden;
}

.how-poster-real > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.how-scan-phone {
  right: -10%;
  top: 79px;
  z-index: 6;
  width: 265px;
  height: 514px;
  border-radius: 42px;
  transform: translateX(72%) rotate(8deg);
  transition: transform 820ms cubic-bezier(0.18, 0.8, 0.22, 1);
}

.how-chapter.is-visible .how-scan-phone {
  transform: translateX(0) rotate(5deg);
}

/* La escena 03—04 replica la app de Cámara de iOS 26, que es la versión que
   trae hoy cualquier iPhone actualizado. El rediseño Liquid Glass movió cosas
   de lugar respecto a versiones anteriores:
     · la vista previa va a pantalla completa y los controles flotan encima
       con material translúcido, en vez de vivir sobre franjas negras;
     · abajo quedan solo Foto y Video (al resto se llega deslizando), y ahora
       van DEBAJO del obturador, no arriba;
     · el obturador perdió el aro blanco brillante — ahora es un aro tenue;
     · la miniatura de la galería es redonda, ya no cuadrada;
     · los botones de zoom perdieron la barra de fondo;
     · lo de arriba (flash, Live Photo, estilos) se guardó en un menú.
   Todas las medidas van en `em` y el único `font-size` cambia por breakpoint,
   así la interfaz escala con el teléfono sin duplicar cada regla. */
.how-camera-view {
  position: absolute;
  inset: 8px;
  overflow: hidden;
  color: var(--white);
  background: #000;
  border-radius: 34px;
  font-size: 10px;
}

.how-cam-frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Pared y mostrador fuera de foco. Es el mismo archivo del póster, desenfocado
   y oscurecido: da un ambiente creíble sin pedir otra descarga. */
.how-cam-frame::before {
  content: "";
  position: absolute;
  inset: -25%;
  background: url("/media/poster-cardify.webp") center / cover no-repeat;
  filter: blur(11px) brightness(0.5) saturate(0.55);
}

.how-cam-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(86% 58% at 50% 40%, transparent 48%, rgba(0, 0, 0, 0.5) 100%);
}

/* La hoja impresa entera, encuadrada de cerca: casi llena el visor pero se
   sigue viendo completa, que es como se ve al apuntarle desde medio metro.
   La rotación asoma las esquinas y el visor las recorta — eso mismo pasa al
   encuadrar a pulso. Va centrada en la franja libre, no en la pantalla. */
.how-cam-sheet {
  position: absolute;
  left: 50%;
  top: 40%;
  height: 58%;
  aspect-ratio: 900 / 1169;
  transform: translate(-50%, -50%) rotate(-1.6deg);
  box-shadow: 0 0.9em 2em rgba(0, 0, 0, 0.45);
}

.how-cam-sheet img {
  width: 100%;
  height: 100%;
  display: block;
}

/* Recuadro amarillo de detección, en las coordenadas reales del QR dentro del
   póster (x 55.6%–78.0%, y 51.3%–68.4%) más un margen. */
.how-cam-detect {
  position: absolute;
  left: 53.4%;
  top: 49.4%;
  width: 26.8%;
  height: 21.2%;
  border: 0.16em solid #ffd60a;
  border-radius: 0.6em;
  opacity: 0;
}

.how-cam-link {
  position: absolute;
  left: 50%;
  bottom: 29%;
  z-index: 3;
  max-width: 84%;
  padding: 0.42em 0.9em;
  color: #1c1b19;
  background: #ffd60a;
  border-radius: 999px;
  font-size: 0.74em;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-50%);
}

.how-cam-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  height: 5.6em;
  padding: 0 1.6em;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
}

/* Menú de controles: en iOS 26 el flash, Live Photo, estilos y modo noche
   viven aquí dentro en vez de estar sueltos en la barra superior. */
.how-cam-menu {
  width: 2.5em;
  height: 2.5em;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 50%;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.how-cam-caret {
  width: 0.72em;
  height: 0.72em;
  border-right: 0.15em solid rgba(255, 255, 255, 0.92);
  border-bottom: 0.15em solid rgba(255, 255, 255, 0.92);
  transform: translateY(-0.16em) rotate(45deg);
}

/* Liquid Glass: la barra deja ver la imagen por detrás en vez de taparla con
   negro sólido. El color de respaldo cubre a los navegadores sin backdrop. */
.how-cam-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  padding: 1.2em 0 1.5em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.05em;
  background: rgba(14, 14, 14, 0.32);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}

/* Sin barra de fondo: cada distancia focal es su propio botón suelto. */
.how-cam-zoom {
  display: flex;
  align-items: center;
  gap: 0.55em;
}

.how-cam-zoom b {
  width: 2.05em;
  height: 2.05em;
  display: grid;
  place-items: center;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(0, 0, 0, 0.42);
  border-radius: 50%;
  font-size: 0.76em;
  font-weight: 700;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.how-cam-zoom b.is-on {
  color: #ffd60a;
  font-size: 0.88em;
}

.how-cam-shoot {
  width: 100%;
  padding: 0 2.1em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Redonda, no cuadrada — cambió con Liquid Glass. */
.how-cam-thumb {
  width: 2.7em;
  height: 2.7em;
  background: linear-gradient(140deg, #9aa8b5, #5f6b78);
  border-radius: 50%;
}

/* Aro tenue en vez del aro blanco brillante de antes. */
.how-cam-shutter {
  width: 5.2em;
  height: 5.2em;
  display: grid;
  place-items: center;
  border: 0.14em solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
}

.how-cam-shutter::before {
  content: "";
  width: 4.15em;
  height: 4.15em;
  background: var(--white);
  border-radius: 50%;
}

.how-cam-flip {
  width: 2.7em;
  height: 2.7em;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Solo Foto y Video, y por debajo del obturador. */
.how-cam-modes {
  display: flex;
  align-items: center;
  gap: 1.8em;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.72em;
  font-weight: 700;
  letter-spacing: 0.09em;
}

.how-cam-modes .is-on { color: #ffd60a; }

/* Un solo reloj de 8s para las cuatro capas: la cámara encuadra el póster,
   iOS reconoce el QR y ofrece el enlace, y el resultado es la pantalla real
   de Wallet pidiendo agregar la tarjeta. Con transiciones encadenadas por
   retardo no había forma de que ciclaran en sincronía. */
.how-scan-result {
  position: absolute;
  inset: 0;
  z-index: 9;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
  opacity: 0;
}

.how-chapter.is-visible .how-camera-view {
  animation: how-cam-loop 8s ease-in-out infinite;
}

.how-chapter.is-visible .how-scan-result {
  animation: how-result-loop 8s ease-in-out infinite;
}

.how-chapter.is-visible .how-cam-detect {
  animation: how-detect-loop 8s ease-out infinite;
}

.how-chapter.is-visible .how-cam-link {
  animation: how-link-loop 8s ease-out infinite;
}

@keyframes how-cam-loop {
  0%, 45% { opacity: 1; }
  52%, 88% { opacity: 0; }
  95%, 100% { opacity: 1; }
}

@keyframes how-result-loop {
  0%, 45% { opacity: 0; transform: scale(1.05); }
  52%, 88% { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: scale(1.05); }
}

@keyframes how-detect-loop {
  0%, 13% { opacity: 0; transform: scale(1.22); }
  20%, 44% { opacity: 1; transform: scale(1); }
  47%, 100% { opacity: 0; transform: scale(1); }
}

@keyframes how-link-loop {
  0%, 19% { opacity: 0; transform: translate(-50%, 0.7em); }
  26%, 44% { opacity: 1; transform: translate(-50%, 0); }
  47%, 100% { opacity: 0; transform: translate(-50%, 0); }
}

.how-wallet-receipt {
  left: 31%;
  bottom: 5px;
  min-width: 190px;
  padding: 12px 15px;
  gap: 11px;
  border-radius: 16px;
}

.how-wallet-check { background: var(--green); }

.how-stage-return { min-height: 700px; }

.how-stage-return::before { background: rgba(255, 254, 250, 0.24); }

/* Escena 05—06: capturas reales de la app en vez de maquetas en CSS. El
   teléfono de la izquierda lleva la pantalla completa del cliente; la de
   promociones no es una captura completa, así que se presenta como una pieza
   de interfaz recortada y no dentro de un marco —meterla en un teléfono
   dejaría media pantalla vacía. */
.how-phone-update {
  left: -6%;
  top: 150px;
  z-index: 3;
  width: 240px;
  transform: rotate(-5deg);
}

.how-promo-card {
  position: absolute;
  right: -4%;
  top: 92px;
  z-index: 10;
  width: 300px;
  margin: 0;
  overflow: hidden;
  background: #0a0a0a;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 22px;
  box-shadow: 0 26px 58px rgba(28, 27, 25, 0.32);
  transform: rotate(2deg);
}

.how-promo-card img {
  width: 100%;
  height: auto;
  display: block;
}

/* Notificación de Wallet: banner de iOS, con el material translúcido y el
   icono redondeado de la app. */
.how-notification {
  left: 50%;
  top: 12px;
  width: min(340px, 84%);
  padding: 11px 14px;
  gap: 11px;
  align-items: flex-start;
  background: rgba(28, 27, 25, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  transform: translateX(-50%);
}

/* El icono de la app tal cual, sobre fondo papel (Logos/App Icon). */
.how-notif-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  display: block;
  border-radius: 9px;
}

.how-notification small {
  display: flex;
  align-items: center;
  gap: 5px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.how-notification small b { font-weight: 700; }

.how-notification strong {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
}

/* El pase real, al frente de las dos capturas. */
.how-final-pass {
  position: absolute;
  left: 30%;
  bottom: 14px;
  z-index: 9;
  width: 190px;
  height: auto;
  display: block;
  /* Sin `border-radius`: el pase trae sus propias esquinas redondeadas en el
     alfa del archivo, y encimarle otro radio las cortaba en seco. Por lo mismo
     la sombra va con `drop-shadow` y no con `box-shadow` — ésta se dibujaría
     como un rectángulo por detrás de las esquinas transparentes. */
  filter: drop-shadow(0 22px 40px rgba(28, 27, 25, 0.34));
  transform: rotate(3deg);
}

html[data-motion="on"] .how-chapter [data-reveal-piece] {
  opacity: 0;
  translate: 0 20px;
  transition: opacity 520ms ease, translate 680ms cubic-bezier(0.2, 0.78, 0.28, 1);
}

html[data-motion="on"] .how-chapter.is-visible [data-reveal-piece] {
  opacity: 1;
  translate: 0 0;
}

html[data-motion="on"] .how-chapter.is-visible [data-reveal-piece]:nth-child(2) { transition-delay: 130ms; }
html[data-motion="on"] .how-chapter.is-visible [data-reveal-piece]:nth-child(3) { transition-delay: 250ms; }

@media (max-width: 980px) {
  .how-chapter {
    grid-template-columns: minmax(260px, 0.85fr) minmax(390px, 1.15fr);
    gap: 24px;
  }

  .how-phone { width: 240px; height: 500px; }
  .how-phone-video { width: 236px; height: auto; }
  .how-poster-small { width: 220px; right: -1%; }
  .how-poster-large { width: 285px; }
  .how-scan-phone { width: 230px; height: 480px; }

  /* Entre 760 y 980 el escenario baja a ~390px y el compositor ya no cabe al
     lado del teléfono: se le encimaba encima del nombre del cliente. Aquí se
     apilan igual que en vertical —notificación, compositor, teléfono— y el
     pase queda abajo al centro. */
  .how-stage-return { min-height: 760px; }
  .how-promo-card { right: -4%; left: auto; top: 92px; bottom: auto; width: 68%; transform: rotate(2deg); }
  .how-phone-update { left: -10%; top: 276px; width: 54%; }
  .how-final-pass { left: 30%; top: 440px; bottom: auto; width: 46%; }
}

@media (max-width: 759px) {
  .how {
    padding: 86px 0 62px;
  }

  .how-intro {
    margin-bottom: 42px;
  }

  .how-intro h2 {
    font-size: clamp(48px, 14vw, 62px);
  }

  .how-lede {
    font-size: 16px;
  }

  .how-chapters {
    gap: 18px;
  }

  .how-chapter {
    min-height: 0;
    padding: 28px 22px 22px;
    display: block;
    border-radius: 28px;
  }

  .how-chapter-label {
    margin-bottom: 18px;
  }

  .how-step {
    padding: 21px 0;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 9px;
  }

  .how-step h3 {
    margin-bottom: 8px;
    font-size: 31px;
  }

  .how-step p {
    font-size: 13px;
  }

  .how-stage {
    min-height: 540px;
    margin-top: 18px;
  }

  .how-stage::before {
    width: 330px;
    height: 330px;
  }

  .how-phone {
    width: 222px;
    height: 465px;
    border-radius: 35px;
  }

  .how-phone-video {
    width: 218px;
    height: auto;
    border-radius: 36px;
  }

  .how-phone-video .how-screen-video {
    border-radius: 9.4% / 4.35%;
  }

  /* Centrado sobre la pantalla, como cualquier control de reproducción. Abajo
     del teléfono no cabía: el póster lo tapa desde media altura, y el pill
     dice "Ver demostración" (no "Repetir") cuando el video no se reproduce
     solo. El teléfono queda por debajo del póster en el apilado, así que la
     única franja libre es la mitad superior. */
  .how-phone-video .how-video-replay {
    left: 50%;
    top: 44%;
    bottom: auto;
    transform: translate(-50%, 8px);
  }

  .how-phone-video.is-video-complete .how-video-replay,
  html[data-data-saver="on"] .how-phone-video .how-video-replay {
    transform: translate(-50%, 0);
  }

  .how-phone-create { left: 0; }
  .how-poster-small { right: -2%; bottom: 7px; width: 190px; min-height: 276px; padding: 18px; }
  .how-poster-small > p { margin: 45px 0 25px; font-size: 21px; }
  .how-download-chip { right: 1%; }

  .how-stage-share { min-height: 575px; }
  /* El QR vive en la mitad derecha del póster, justo donde ahora cae el
     teléfono. Correrlo a la izquierda deja el código a la vista para que la
     escena siga leyéndose como "está escaneando esto". */
  .how-poster-large { left: -13%; top: 18px; width: 260px; min-height: 455px; padding: 23px; }
  .how-poster-large > p { margin: 68px 0 43px; font-size: 31px; }
  /* El -30% de antes escalaba con el ancho del contenedor, así que entre más
     grande el teléfono más se salía: en un iPhone de 430px se comía casi la
     mitad del marco. Con un offset fijo se sale siempre lo mismo —unos pocos
     píxeles— y el aparato se ve completo en cualquier pantalla. */
  .how-scan-phone { right: -14px; top: 74px; width: 215px; height: 445px; }
  .how-chapter.is-visible .how-scan-phone { transform: translateX(0) rotate(4deg); }
  /* Único ajuste de la interfaz de Cámara entre breakpoints: todo lo demás va
     en `em` y escala solo. 8.1px = 10px × (215/265), el mismo factor que el
     teléfono. */
  .how-camera-view { font-size: 8.1px; }
  .how-wallet-receipt { left: 6%; bottom: 4px; }

  .how-stage-return { min-height: 610px; }
  /* En vertical el escenario es la mitad de ancho que en horizontal, así que
     las medidas fijas dejaban de funcionar: el compositor ocupaba el 91% del
     ancho y aplastaba la escena, y el pase quedaba flotando solo en un hueco.
     En porcentajes las tres piezas guardan la misma proporción que en
     horizontal y vuelven a encimarse. */
  /* El compositor va debajo de la notificación pero corrido a la derecha y más
     angosto: apilado y del mismo ancho, las dos cajas oscuras se leían como una
     sola mancha. Queda arriba del teléfono y del pase, sin tocarlos. */
  .how-stage-return { min-height: 640px; }
  .how-notification { top: 4px; width: 96%; }
  .how-promo-card { right: -4%; left: auto; top: 84px; bottom: auto; width: 74%; border-radius: 14px; transform: rotate(2deg); }
  .how-phone-update { left: -9%; top: 236px; width: 58%; }
  .how-final-pass { left: 30%; right: auto; top: 400px; bottom: auto; width: 52%; }
}

@media (max-width: 370px) {
  .how-chapter { padding-inline: 18px; }
  .how-phone-create { left: -7%; }
  .how-poster-small { right: -5%; }
  .how-scan-phone { right: -39%; }
  .how-phone-update { left: -14%; }
}

/* Movimiento reducido o ahorro de datos: nada cicla. La escena se queda en el
   fotograma que mejor explica el paso — la pantalla real de Wallet pidiendo
   agregar la tarjeta — que es el mismo criterio que el póster del video. */
@media (prefers-reduced-motion: reduce) {
  .how-scan-phone,
  .how-chapter.is-visible .how-scan-phone {
    transform: translateX(0) rotate(5deg);
  }

  .how-chapter.is-visible .how-camera-view,
  .how-chapter.is-visible .how-scan-result,
  .how-chapter.is-visible .how-cam-detect,
  .how-chapter.is-visible .how-cam-link {
    animation: none;
  }

  .how-camera-view {
    opacity: 0;
  }

  .how-scan-result {
    opacity: 1;
  }
}

html[data-data-saver="on"] .how-chapter.is-visible .how-camera-view,
html[data-data-saver="on"] .how-chapter.is-visible .how-scan-result,
html[data-data-saver="on"] .how-chapter.is-visible .how-cam-detect,
html[data-data-saver="on"] .how-chapter.is-visible .how-cam-link {
  animation: none;
}

html[data-data-saver="on"] .how-camera-view {
  opacity: 0;
}

html[data-data-saver="on"] .how-scan-result {
  opacity: 1;
}

/* Precio */
.pricing {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  color: var(--white);
  background: var(--ink);
}

.price-ghost {
  position: absolute;
  right: -34px;
  top: 7%;
  color: transparent;
  font: 700 clamp(180px, 58vw, 340px)/0.8 "Space Grotesk", sans-serif;
  letter-spacing: -0.1em;
  -webkit-text-stroke: 1px rgba(255, 254, 250, 0.08);
  transform: translate3d(var(--price-ghost-x, 0), 0, 0);
  user-select: none;
  pointer-events: none;
}

.price-layout {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: max(88px, calc(env(safe-area-inset-top) + 62px));
  padding-bottom: max(70px, calc(env(safe-area-inset-bottom) + 44px));
  display: grid;
  align-content: center;
  gap: 52px;
}

.eyebrow {
  color: rgba(255, 254, 250, 0.46);
}

.price-copy h2 {
  max-width: 650px;
  margin-bottom: 0;
  font-size: clamp(46px, 12vw, 66px);
  line-height: 0.96;
}

.price-copy h2 span {
  color: var(--coral);
}

.price {
  margin-bottom: 28px;
  display: flex;
  align-items: flex-end;
  gap: 7px;
}

.price sup {
  margin-bottom: 35px;
  color: var(--coral);
  font: 700 23px "Space Grotesk", sans-serif;
}

.price strong {
  font: 700 clamp(82px, 24vw, 112px)/0.76 "Space Grotesk", sans-serif;
  letter-spacing: -0.085em;
}

.price > span {
  margin-bottom: 3px;
  color: rgba(255, 254, 250, 0.48);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.3;
}

.price-details ul {
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-light);
}

.price-details li {
  min-height: 52px;
  padding: 14px 0 14px 27px;
  position: relative;
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line-light);
  color: rgba(255, 254, 250, 0.76);
  font-size: 13px;
}

.price-details li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 800;
}

.price-details .button {
  width: 100%;
}

.charge-note {
  margin: 13px 0 0;
  color: rgba(255, 254, 250, 0.43);
  font-size: 10px;
  line-height: 1.5;
  text-align: center;
}

html[data-motion="on"] [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 520ms ease, transform 620ms cubic-bezier(0.2, 0.78, 0.28, 1);
}

html[data-motion="on"] [data-reveal][data-reveal-state="visible"] {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Footer */
.site-footer {
  padding: 48px 0 max(40px, calc(env(safe-area-inset-bottom) + 28px));
  color: var(--white);
  background: var(--ink-2);
  border-top: 1px solid rgba(255, 254, 250, 0.08);
}

.footer-inner {
  display: grid;
  gap: 28px;
}

.footer-brand img {
  width: 108px;
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
}

/* El acceso a preferencias de cookies es un <button> para que abra el panel
   sin navegar, pero visualmente es un enlace más del pie. */
.site-footer nav a,
.site-footer nav button {
  color: rgba(255, 254, 250, 0.56);
  font-size: 12px;
  font-weight: 700;
  transition: color 160ms ease;
}

.site-footer nav button {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: inherit;
  line-height: inherit;
}

.site-footer nav a:hover,
.site-footer nav button:hover {
  color: var(--white);
}

.site-footer p {
  margin: 0;
  color: rgba(255, 254, 250, 0.3);
  font: 600 10px "JetBrains Mono", monospace;
}

@media (min-width: 760px) {
  .page-shell {
    width: min(calc(100% - 80px), var(--shell));
  }

  .header-inner {
    min-height: 92px;
  }

  .brand img {
    width: 142px;
  }

  .login-link {
    font-size: 14px;
  }

  .hero {
    min-height: 720px;
  }

  /* En escritorio vuelven a ser dos columnas: texto y CTA apilados a la
     izquierda, la foto ocupando ambas filas a la derecha. */
  .hero-inner {
    padding-top: 110px;
    padding-bottom: 64px;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(380px, 0.92fr);
    grid-template-areas:
      "copy deck"
      "cta  deck";
    align-content: center;
    justify-items: start;
    gap: 0 30px;
  }

  /* En escritorio texto y foto viven en columnas distintas, así que el
     parallax no puede encimarlos. */
  .hero-copy,
  .hero-cta {
    transform: translate3d(0, var(--hero-copy-y, 0), 0);
    opacity: var(--hero-copy-opacity, 1);
    will-change: transform, opacity;
  }

  .hero-copy { grid-area: copy; }

  .hero-cta {
    grid-area: cta;
    flex: none;
  }

  /* En escritorio la foto no toca el borde inferior: no hay costura que tapar. */
  .hero::after {
    display: none;
  }

  .hero-deck {
    grid-area: deck;
    align-self: center;
  }

  .hero h1 {
    margin-bottom: 28px;
    font-size: clamp(56px, 5.7vw, 84px);
  }

  .hero-lede {
    margin-bottom: 32px;
    font-size: 20px;
  }

  .hero .button,
  .button-note {
    width: auto;
    max-width: none;
  }

  .hero-cta {
    text-align: left;
  }

  .button-note {
    margin-inline: 0;
    text-align: left;
  }

  .hero-deck {
    position: relative;
    left: auto;
    bottom: auto;
    /* Se manda por alto, no por ancho: en pantallas bajitas la foto se encoge
       sola en vez de empujar el titular contra el borde del hero. */
    width: 100%;
    height: min(668px, calc(100svh - 208px));
    margin: 0;
    justify-self: end;
  }

  .hero-deck picture {
    height: 100%;
  }

  .hero-deck img {
    height: 100%;
    object-fit: contain;
    object-position: center;
  }

  .scroll-cue {
    left: 0;
    bottom: 24px;
    display: flex;
    transform: none;
  }

  .story {
    height: 240vh;
    height: 240svh;
  }

  .story-sticky {
    min-height: 700px;
  }

  .story-progress {
    right: 24px;
  }

  .story-layout {
    padding-top: 64px;
    padding-bottom: 44px;
    grid-template-columns: minmax(300px, 0.78fr) minmax(480px, 1.22fr);
    grid-template-rows: 1fr;
    align-items: center;
    gap: 54px;
  }

  .story-copy {
    height: 280px;
  }

  .story-kicker {
    margin-bottom: 26px;
  }

  .story-scene {
    inset: 58px 0 auto;
    max-width: 390px;
  }

  .story-scene h2 {
    margin-bottom: 14px;
    font-size: clamp(72px, 6.8vw, 96px);
  }

  .story-scene p {
    max-width: 370px;
    font-size: 18px;
  }

  .story-visual {
    width: min(100%, 630px);
    height: 600px;
    max-height: 72vh;
  }

  .orbit-one {
    width: 600px;
    height: 600px;
  }

  .orbit-two {
    width: 440px;
    height: 440px;
  }

  .device-frame {
    width: 338px;
    height: 466px;
    border-radius: 43px;
  }

  .device-frame::before {
    top: 12px;
    width: 88px;
    height: 24px;
  }

  .device-top {
    height: 54px;
    padding: 17px 22px 0;
    font-size: 9px;
  }

  .device-top strong {
    font-size: 9px;
  }

  .wallet-pass {
    top: 67px;
    right: 16px;
    left: 16px;
    min-height: 308px;
    padding: 25px;
    border-radius: 26px;
  }

  .wallet-pass header strong {
    font-size: 17px;
  }

  .wallet-pass header b {
    width: 39px;
    height: 39px;
  }

  .pass-count {
    margin: 34px 0 21px;
  }

  .pass-count strong {
    font-size: 39px;
  }

  .stamp-grid {
    padding: 17px;
    gap: 12px;
  }

  .pass-code {
    height: 26px;
    margin-top: 21px;
    border-width: 8px;
  }

  .palette {
    right: 22px;
    bottom: 20px;
    left: 22px;
    height: 48px;
  }

  .wallet-update {
    right: 18px;
    bottom: 18px;
    left: 18px;
    min-height: 53px;
    padding: 10px 11px;
  }

  .wallet-update > span {
    width: 32px;
    height: 32px;
  }

  .wallet-update strong {
    font-size: 11px;
  }

  .qr-ticket {
    width: 188px;
    height: 230px;
    padding: 19px;
    border-radius: 24px;
  }

  .qr-code {
    width: 130px;
    height: 130px;
    margin-top: 15px;
  }

  .qr-ticket > span {
    margin-top: 11px;
    font-size: 14px;
  }

  .business-control {
    width: 256px;
    padding: 20px;
    border-radius: 24px;
  }

  .control-person {
    grid-template-columns: 42px 1fr 8px;
    gap: 11px;
  }

  .control-person > span {
    width: 42px;
    height: 42px;
    font-size: 10px;
  }

  .control-person strong {
    font-size: 13px;
  }

  .control-count {
    margin: 17px 0 15px;
    padding-top: 14px;
  }

  .control-count strong {
    font-size: 25px;
  }

  .demo-action {
    min-height: 50px;
    font-size: 13px;
  }

  .price-layout {
    grid-template-columns: minmax(0, 1.08fr) minmax(370px, 0.92fr);
    align-items: center;
    gap: 90px;
  }

  .price-copy h2 {
    font-size: clamp(62px, 6.4vw, 90px);
  }

  .price-details .button {
    width: auto;
  }

  .charge-note {
    max-width: 390px;
    text-align: left;
  }

  .price-ghost {
    right: -70px;
    top: 8%;
    font-size: min(36vw, 520px);
  }

  .footer-inner {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 40px;
  }

  .site-footer nav {
    justify-content: center;
  }
}

@media (max-width: 759px) and (max-height: 740px) {
  .hero {
    min-height: 620px;
  }

  .hero-inner {
    padding-top: max(92px, calc(env(safe-area-inset-top) + 80px));
  }

  .hero h1 {
    margin-bottom: 16px;
    font-size: 48px;
  }

  .hero-lede {
    max-width: 350px;
    margin-bottom: 20px;
    font-size: 15px;
  }

  .button {
    min-height: 52px;
  }

  .hero-deck {
    margin-top: -26px;
  }

  .story-sticky {
    min-height: 620px;
  }

  .story-layout {
    padding-top: 52px;
    grid-template-rows: 132px minmax(0, 1fr);
  }

  .story-copy {
    height: 132px;
  }

  .story-scene {
    inset: 26px 0 auto;
  }

  .story-scene h2 {
    margin-bottom: 5px;
    font-size: 43px;
  }

  .story-scene p {
    font-size: 13px;
  }

  .story-visual {
    max-height: 390px;
  }

  .device-frame {
    width: 246px;
    height: 334px;
  }

  .wallet-pass {
    top: 48px;
    min-height: 220px;
    padding: 17px;
  }

  .pass-count {
    margin: 20px 0 12px;
  }

  .pass-count strong {
    font-size: 26px;
  }

  .stamp-grid {
    padding: 10px;
    gap: 7px;
  }

  .pass-code {
    margin-top: 12px;
  }

  .palette {
    bottom: 12px;
  }

  .wallet-update {
    right: 11px;
    bottom: 11px;
    left: 11px;
  }
}

@media (max-width: 370px) {
  .page-shell {
    width: min(calc(100% - 32px), var(--shell));
  }

  .hero h1 {
    font-size: 49px;
  }

  .hero .button {
    font-size: 14px;
  }

  .story-scene h2 {
    font-size: 45px;
  }

  .story-progress {
    display: none;
  }
}

/* Sin coreografía: todo sigue legible y utilizable. */
html[data-motion="static"] .story,
html[data-motion="static"] .story-sticky {
  height: auto;
  min-height: 0;
}

html[data-motion="static"] .story-sticky {
  position: relative;
  overflow: visible;
  padding: 80px 0 72px;
}

html[data-motion="static"] .story-layout {
  height: auto;
  padding-top: 0;
  padding-bottom: 0;
  display: block;
}

html[data-motion="static"] .story-copy {
  height: auto;
}

html[data-motion="static"] .story-kicker {
  margin-bottom: 24px;
}

html[data-motion="static"] .story-scene {
  position: relative;
  inset: auto;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

html[data-motion="static"] .story-scene:last-child {
  border-bottom: 1px solid var(--line);
}

html[data-motion="static"] .story-scene h2 {
  font-size: 42px;
}

html[data-motion="static"] .story-visual {
  height: 470px;
  margin-top: 42px;
}

html[data-motion="static"] .device-frame {
  transform: translate3d(-50%, -50%, 0);
}

html[data-motion="static"] .qr-ticket {
  opacity: 1;
  transform: translate3d(calc(-50% - 82px), calc(-50% - 34px), 0) rotate(-8deg);
}

html[data-motion="static"] .business-control {
  opacity: 1;
  transform: translate3d(calc(-50% - 70px), calc(-50% + 104px), 0);
  pointer-events: auto;
}

html[data-motion="static"] .palette {
  opacity: 0;
}

html[data-motion="static"] .wallet-update {
  opacity: 1;
  transform: none;
}

html[data-motion="static"] .story-progress {
  display: none;
}

@media (min-width: 760px) {
  html[data-motion="static"] .story-layout {
    display: grid;
  }

  html[data-motion="static"] .story-copy {
    align-self: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}