/* ============================================================
   Folio Budget · landing · VERSIÓN B («Apple»)
   Hermana de site/, para comparar. NO la sustituye.

   Qué cambia respecto de la versión A, y solo esto:
   1. El degradado sale del fondo y entra en el TEXTO. Titular en dos
      tonos: sujeto en tinta + remate en degradado. Es el mecanismo de
      apple.com/es/ipad-air (clase .text-gradient), no su diseño.
   2. Tipografía mucho mayor. Apple manda el titular al 11 % del ancho
      de pantalla; la versión A se quedaba en la mitad.
   3. Aire. Secciones de 6 a 9 rem en vez de 4.
   4. Recorrido en carrusel horizontal con scroll-snap, como la galería
      de «Lo principal».
   5. Cifras grandes (figure.stat) donde la versión A ponía frases.

   Qué NO cambia: Figtree, la paleta, el blanco, y la regla de que las
   tarjetas nunca llevan sombra.

   ACCESIBILIDAD DEL DEGRADADO EN TEXTO — leer antes de tocar los colores.
   Medido sobre blanco: azul 3,35:1 · violeta 3,58:1 · magenta 3,11:1 ·
   rojo 3,76:1 · ÁMBAR 1,93:1. O sea que los cinco valen para TEXTO
   GRANDE (mínimo 3:1 en WCAG: ≥24 px, o ≥18,7 px en negrita) y ninguno
   vale para texto normal. El ámbar no valía ni para texto grande, así
   que en el degradado de TEXTO se sustituye por #BF8B31 (3,02:1).
   Consecuencia dura: .grad SOLO se usa en titulares grandes. Nunca en
   cuerpo, nunca en etiquetas, nunca por debajo de 24 px.
   ============================================================ */

@font-face {
  font-family: 'Figtree';
  src: url('fonts/figtree-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('fonts/figtree-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('fonts/figtree-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --ink:        #1D1D1F;
  --muted:      #6E6E73;
  --bg:         #FFFFFF;
  --bg-alt:     #F5F5F7;   /* el gris de sección de Apple, un punto más marcado que el de la versión A */
  --line:       #E5E5E8;
  --card-line:  #E2E2E5;

  /* Paleta del planner, intacta. Sigue mandando en barras y diagramas. */
  --blue:    #3F8DEF;
  --violet:  #986EF3;
  --magenta: #DA6AB9;
  --red:     #E05552;
  --amber:   #F0AF3E;

  /* El ámbar SOLO para texto: 1,93:1 no es legible ni de lejos. */
  --amber-text: #BF8B31;

  --w-wide: 68rem;
  --w-mid:  52rem;
  --w-text: 38rem;

  --t-sm: .875rem;
  --t-md: 1.0625rem;   /* 17 px, la medida de cuerpo de Apple */
  --t-lg: 1.1875rem;
  --t-xl: 1.375rem;

  --tr-xd:  -0.04em;
  --tr-d:   -0.032em;
  --tr-h:   -0.022em;
  --tr-ui:  -0.01em;
  --tr-caps: 0.07em;

  --gutter: 1.375rem;
  --bar-h:  4.5rem;
  --radius: 28px;
  --step: cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
/* El fondo de `html` es LA CAUSA de la franja blanca sobre el notch. Sin él,
   el blanco de `body` se propaga al lienzo y es lo que Safari pinta detrás de
   la barra de estado del iPhone. Dándole aquí el tinte claro de la parte alta
   del hero, esa franja deja de cortar y enlaza con el degradado. `body` sigue
   en blanco, así que la página no cambia en nada. */
html {
  -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overscroll-behavior-y: none;
  background: #F4F2F7;
}

body {
  margin: 0;
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: var(--t-md);
  line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img, svg, video { max-width: 100%; display: block; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

/* ============================================================
   EL DEGRADADO EN TEXTO · el mecanismo entero de esta versión
   ============================================================ */

/* Fallback: si background-clip:text no existe, se leen en tinta. */
.grad, .grad--one { color: var(--ink); }

/* DOS NIVELES, y el reparto importa más que la técnica.
   · .grad      — los cinco colores. Es un ACONTECIMIENTO: solo dos veces en
                  toda la página, hero y cierre. Son los dos extremos, así
                  que hacen de marco.
   · .grad--one — azul→violeta. Es el énfasis normal, y va siempre en el
                  mismo color a propósito. Variar el color por sección
                  reinventa la sobrecarga que se quería quitar; con un solo
                  color de énfasis, el multicolor vuelve a significar algo.
                  Azul y violeta son los dos primeros de la paleta en orden:
                  el énfasis es «el principio de la paleta» y el hero y el
                  cierre son «la paleta entera».
   Antes había ocho titulares con degradado. Ahora hay cuatro: dos de cada. */

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .grad--one {
    background-image: linear-gradient(118deg, var(--blue) 10%, var(--violet) 95%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }

  .grad {
    /* Diagonal, y NO `box-decoration-break: clone`. Se probaron los dos:
       con `clone`, un titular de dos líneas pinta el arcoíris ENTERO en
       cada línea y se ve el mismo degradado repetido, que parece un error.
       Con el reparto por defecto (`slice`) las dos líneas comparten un
       único degradado, así que la segunda continúa donde acabó la primera.
       El ángulo tiene que ser diagonal para que eso se note: a 96° las dos
       líneas quedaban casi idénticas. */
    background-image: linear-gradient(118deg,
      var(--blue) 0%, var(--violet) 26%, var(--magenta) 50%,
      var(--red) 74%, var(--amber-text) 100%);
    -webkit-background-clip: text;
            background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

/* Modo de contraste forzado del sistema: se devuelve el color del sistema
   o el titular desaparece. */
@media (forced-colors: active) {
  .grad, .grad--one { -webkit-text-fill-color: currentColor; color: CanvasText; background: none; }
}

/* ============================================================
   REJILLA Y SECCIONES
   ============================================================ */

/* Aire entre secciones. En MÓVIL se bajó de 5,5 a 4 rem (de 176 a 128 px entre
   dos secciones): en una pantalla de 375 px ese aire obligaba a varios gestos
   de scroll sobre blanco vacío entre un apartado y el siguiente, y la página se
   leía más lenta. En escritorio se mantiene el respiro amplio (8,5 rem), que es
   donde sí luce y donde no cuesta nada. */
.block { padding: 4rem 0; position: relative; }
.block--tight { padding: 3rem 0; }

/* «Four steps to set up» y «Two looks» van pegados a la sección de encima, que
   es BLANCA como ellos: sin franja gris que las separe, los dos márgenes se
   sumaban y quedaba un vacío que parecía un error de maquetación. Donde el
   fondo sí cambia (las secciones grises) el margen completo se mantiene,
   porque ahí el color ya hace de separación. */
#setup, #looks { padding-top: 1.5rem; }
@media (min-width: 48rem) { #setup, #looks { padding-top: 4rem; } }
.block--alt  { background: var(--bg-alt); }
.inner { width: 100%; max-width: var(--w-wide); margin: 0 auto; padding: 0 var(--gutter); }
.inner--mid  { max-width: var(--w-mid); }
.inner--text { max-width: var(--w-text); }

@media (min-width: 48rem) {
  .block { padding: 8.5rem 0; }
  .block--tight { padding: 5.5rem 0; }
  :root { --gutter: 2.5rem; }
}

/* Velo de gradiente de fondo: se conserva del sistema A, pero mucho más
   tenue, porque ahora el color también vive en el texto y dos gradientes
   fuertes compitiendo ensucian. */
.veil { isolation: isolate; }
.veil::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  /* Los CINCO colores repartidos EN VERTICAL, alternando lado. Antes había uno
     por esquina más uno central: en una sección corta se veían todos, pero en
     una alta como la oferta (2.200 px) cada color quedaba a cientos de píxeles
     del siguiente y en pantalla solo entraban el azul y el ámbar. Escalonados
     así, cualquier ventana de scroll pilla tres o cuatro. */
  /* Intensidad BAJADA (~35%). Las dos capas se cruzan, así que donde coincidían
     el mismo tono sumaba casi el doble y el fondo se saturaba tanto que el gris
     de los párrafos costaba de leer. El ROJO es el peor de los cinco: es el más
     oscuro y el que menos contraste deja debajo, así que se le baja más que a
     los demás. El movimiento no cambia; solo deja de llegar al pico de color. */
  background:
    radial-gradient(58% 26% at 18% 12%, rgba(63,141,239,.18), transparent 66%),
    radial-gradient(56% 25% at 82% 32%, rgba(152,110,243,.16), transparent 66%),
    radial-gradient(60% 26% at 26% 52%, rgba(218,106,185,.16), transparent 66%),
    radial-gradient(56% 25% at 78% 70%, rgba(224,85,82,.12),  transparent 66%),
    radial-gradient(58% 26% at 30% 88%, rgba(240,175,62,.17), transparent 66%);
}

/* Movimiento del velo (Ajuste E, subido de intensidad a petición del usuario:
   la versión anterior no se percibía). Dos capas de color que derivan con
   transform (GPU, sin repaint, sin peso) en sentidos distintos, para que los
   colores se crucen y se fundan de forma VISIBLE. Solo corre cuando la sección
   está en pantalla (clase is-animating la pone main.js) y solo si el usuario no
   pidió menos movimiento: todo el bloque vive dentro de prefers-reduced-motion:
   no-preference, así que con reduce ni se activa. overflow:hidden recorta el
   agrandado (-20% / -30%) para que la deriva no descubra bordes. */
@media (prefers-reduced-motion: no-preference) {
  .veil { overflow: hidden; }

  /* La capa base ahora también se mueve (antes estaba quieta). Agrandada para
     que el recorrido no descubra los bordes. Conserva su fondo de 5 colores. */
  /* Las dos capas se agrandan un 45% por cada lado. Ese margen es lo que impide
     que el BORDE del rectángulo entre en la zona visible al desplazarse y
     girar: era lo que se veía como un corte blanco recto que no seguía el
     degradado. El recorrido y el giro de abajo están calculados para quedarse
     dentro de ese margen. */
  .veil::before {
    inset: -45%;
    will-change: transform;
    animation: veilA 34s linear infinite;
    animation-play-state: paused;
  }

  /* Segunda capa con los cinco colores en el orden inverso y en el lado
     contrario, para que al cruzarse con la de abajo se mezclen todos.
     SIN filter: blur(). Un degradado radial ya es suave por definición, y el
     blur obligaba al navegador a rasterizar una superficie enorme (en la oferta
     pasaba de 4.000 px): al superar el límite de textura se partía en trozos y
     dejaba justo ese canto blanco. Quitarlo lo arregla y encima va más fino. */
  .veil::after {
    content: ""; position: absolute; inset: -45%; z-index: -1; pointer-events: none;
    background:
      radial-gradient(54% 24% at 76% 8%,  rgba(240,175,62,.15), transparent 64%),
      radial-gradient(56% 25% at 24% 28%, rgba(224,85,82,.11),  transparent 64%),
      radial-gradient(54% 24% at 80% 48%, rgba(63,141,239,.16), transparent 64%),
      radial-gradient(56% 25% at 22% 68%, rgba(152,110,243,.16), transparent 64%),
      radial-gradient(54% 24% at 74% 88%, rgba(218,106,185,.15), transparent 64%);
    will-change: transform;
    animation: veilB 26s linear infinite;
    animation-play-state: paused;
  }

  .veil.is-animating::before,
  .veil.is-animating::after { animation-play-state: running; }
}

/* Ciclo CONTINUO y `linear`, no `alternate` con ease-in-out. Con alternate la
   capa frenaba hasta pararse en cada extremo y se quedaba varios segundos casi
   quieta: en secciones cortas como el cierre parecía estática del todo. Un
   recorrido cerrado (100% vuelve al 0%) a velocidad constante nunca se detiene.
   Las dos capas giran en sentidos opuestos para que los colores se crucen. */
/* Amplitud acotada: como mucho un 12% del propio tamaño de la capa, y la capa
   mide un 190% de la sección, así que el borde nunca llega a asomar (ver el
   comentario de arriba). Aun acotado, en escritorio son ~290 px de recorrido
   por ciclo, de sobra para que se note. El giro se queda en 3 grados por el
   mismo motivo: en una sección muy alta, un grado de más desplaza el canto
   superior muchos píxeles. */
@keyframes veilA {
  0%   { transform: translate3d(-10%, -5%, 0) scale(1.10) rotate(0deg); }
  25%  { transform: translate3d(  7%, -8%, 0) scale(1.16) rotate(2deg); }
  50%  { transform: translate3d( 11%,  6%, 0) scale(1.10) rotate(3deg); }
  75%  { transform: translate3d( -6%,  9%, 0) scale(1.16) rotate(2deg); }
  100% { transform: translate3d(-10%, -5%, 0) scale(1.10) rotate(0deg); }
}
@keyframes veilB {
  0%   { transform: translate3d( 12%,  6%, 0) scale(1.14) rotate(0deg); }
  25%  { transform: translate3d( -9%, 10%, 0) scale(1.20) rotate(-2deg); }
  50%  { transform: translate3d(-12%, -7%, 0) scale(1.14) rotate(-3deg); }
  75%  { transform: translate3d(  8%,-10%, 0) scale(1.20) rotate(-2deg); }
  100% { transform: translate3d( 12%,  6%, 0) scale(1.14) rotate(0deg); }
}

/* ============================================================
   TIPOGRAFÍA
   ============================================================ */

h1 {
  font-size: clamp(2.75rem, 10.5vw, 5.25rem);
  font-weight: 700;
  letter-spacing: var(--tr-xd);
  line-height: 1.04;
  text-wrap: balance;
}

h2 {
  font-size: clamp(2rem, 7vw, 3.25rem);
  font-weight: 700;
  letter-spacing: var(--tr-d);
  line-height: 1.07;
  text-wrap: balance;
}

h3 {
  font-size: clamp(1.3125rem, 3.6vw, 1.625rem);
  font-weight: 600;
  letter-spacing: var(--tr-h);
  line-height: 1.2;
}

.head { text-align: center; max-width: var(--w-mid); margin: 0 auto 3.25rem; }
.head p {
  margin-top: 1.125rem; font-size: var(--t-lg); color: var(--muted);
  max-width: 34rem; margin-left: auto; margin-right: auto;
}

.lede {
  font-size: clamp(1.125rem, 3.4vw, 1.4375rem);
  line-height: 1.45; color: var(--muted);
  max-width: 32rem; margin: 1.5rem auto 0;
  letter-spacing: var(--tr-ui);
}

.eyebrow {
  display: block; font-size: var(--t-sm); font-weight: 600;
  letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--muted);
}

/* Realce dentro del cuerpo, el recurso que Apple usa en todos sus párrafos
   largos: el texto en gris medio y las frases que importan en tinta y
   negrita. No es decoración — es lo que hace legible un párrafo de seis
   líneas en un móvil, porque el ojo puede saltar de resalte en resalte y
   quedarse con el argumento sin leerlo entero.
   NUNCA en degradado: el cuerpo va muy por debajo de los 24 px que exige
   el mínimo de contraste para color. */
.hl { font-weight: 600; color: var(--ink); }

/* ============================================================
   BOTONES Y PRECIO
   ============================================================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.125rem; padding: 0 1.875rem;
  background: var(--ink); color: #FFFFFF;
  font-size: var(--t-md); font-weight: 600; letter-spacing: var(--tr-ui);
  border-radius: 999px; text-decoration: none;
  transition: opacity .2s var(--step), transform .2s var(--step);
  -webkit-tap-highlight-color: transparent;
}
/* El botón crece un pelo al pasar por encima y se hunde al pulsarlo. Es el
   gesto de los botones de apple.com: la respuesta física es lo que los hace
   sentir «caros». El crecimiento solo con puntero. */
@media (hover: hover) {
  .btn:hover { opacity: .9; transform: scale(1.025); }
}
.btn:active { transform: scale(.975); opacity: .9; }
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.paddle:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.looks-switch button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: opacity .2s linear; }
  .btn:hover, .btn:active { transform: none; }
}

.cta { text-align: center; margin-top: 2.5rem; }
.price {
  margin-top: 1rem; font-weight: 600;
  letter-spacing: var(--tr-ui); font-variant-numeric: tabular-nums;
}
.reassure { margin-top: .5rem; font-size: var(--t-sm); color: var(--muted); }
.code-note { margin-top: .45rem; font-size: var(--t-sm); font-weight: 600; color: var(--ink); }

/* ============================================================
   1 · HERO
   ============================================================ */

/* Segunda vía para el notch: el hero se sube lo que mide la barra de estado y
   se compensa con el mismo padding. Resultado: el VELO cubre esa franja y el
   texto se queda exactamente donde estaba. En escritorio env() vale 0, así que
   no cambia nada. */
#hero {
  margin-top: calc(-1 * env(safe-area-inset-top, 0px));
  padding-top: calc(4.5rem + env(safe-area-inset-top, 0px));
  padding-bottom: 3rem; text-align: center;
}
@media (min-width: 48rem) {
  #hero { padding-top: calc(7rem + env(safe-area-inset-top, 0px)); padding-bottom: 6rem; }
}

/* ============================================================
   2 · FRANJA DE HECHOS
   ============================================================ */

/* Las columnas se dimensionan por su CONTENIDO (max-content) y el grupo se
   centra. Con columnas de 1fr el texto quedaba pegado al borde izquierdo de una
   celda mucho más ancha que él, y el bloque entero se leía descentrado hacia la
   izquierda. Así el conjunto queda ópticamente centrado, y en móvil (una sola
   columna) deja de estar pegado al margen izquierdo. */
.facts {
  display: grid; gap: 1.125rem;
  max-width: var(--w-mid); margin: 0 auto;
  grid-template-columns: minmax(0, max-content);
  justify-content: center;
}
.facts li {
  display: flex; align-items: center; gap: .75rem;
  font-size: var(--t-md); font-weight: 600; letter-spacing: var(--tr-ui);
}
.facts svg { flex: 0 0 auto; color: var(--ink); }
@media (min-width: 48rem) {
  .facts { grid-template-columns: repeat(2, minmax(0, max-content)); gap: 1.375rem 2.5rem; }
}

/* ============================================================
   3 · GALERÍA HORIZONTAL DEL RECORRIDO
   El mecanismo de la galería de «Lo principal»: pie de foto grande
   ARRIBA y la imagen debajo, tarjetas que se arrastran con snap.
   ============================================================ */

.rail {
  display: flex; gap: 1rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  /* `proximity` y NO `mandatory`. Con `mandatory`, cuando las tarjetas
     terminaban su animación de entrada el contenedor volvía a engancharse
     y saltaba a la última tarjeta, arrastrando el scroll de la página
     entera con él. `proximity` engancha cuando el dedo se para cerca y no
     toca nada en ningún otro momento. */
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--gutter);
  /* 10px arriba: el carril recorta en vertical (overflow-x: auto obliga a
     overflow-y: auto), y sin ese margen la tarjeta se cortaba al crecer con
     el puntero. */
  padding: 10px var(--gutter) 1.25rem;
  margin: 0 calc(var(--gutter) * -1);
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }

.rail > li {
  flex: 0 0 82%;
  scroll-snap-align: start;
  display: flex; flex-direction: column;
}
@media (min-width: 40rem) { .rail > li { flex-basis: 54%; } }
@media (min-width: 64rem) { .rail > li { flex-basis: 36%; } }

/* La tarjeta es SOLO la captura, y el texto vive DEBAJO, fuera de ella. Es el
   mecanismo de la galería de seguridad de apple.com (tarjeta = imagen; debajo,
   una entradilla en negrita y la explicación en gris).
   Motivo para adoptarlo aquí: cada captura YA lleva escrito el nombre de su
   pestaña («Transactions», «Budget»…), así que el rótulo y el titular dentro de
   la tarjeta lo repetían. Al sacar el texto, la captura se queda con la tarjeta
   entera y se ve mucho más grande, que es lo que de verdad vende. */
.rail-card {
  margin: 0;
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
  /* Marco blanco entre la captura y el borde. A sangre, la esquina redondeada
     del marco recortaba palabras de la propia captura; con este aire la imagen
     respira y no se come nada. La imagen lleva su propio radio, más pequeño,
     para que las dos curvas queden concéntricas. */
  padding: 12px;
}
.rail-shot {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 17px;
}
/* La tarjeta se puede pulsar para centrarla en el carril (lo hace main.js), y
   el cursor lo anuncia solo donde hay puntero. */
@media (hover: hover) { .js .rail > li { cursor: pointer; } }
.rail-copy { margin-top: 1.375rem; color: var(--muted); }
.rail-copy b { color: var(--ink); font-weight: 600; }

/* ============================================================
   FLECHAS DEL CARRUSEL (paddlenav)
   Sustituyen al texto «Swipe to see all five». Es el mecanismo de las
   galerías de apple.com (`.paddlenav-arrow`): dos botones redondos que
   flotan sobre los bordes del carril y se desactivan al llegar al extremo.
   Solo donde hay puntero: en táctil el gesto ya es evidente y las flechas
   estorban. Nunca sombra; el contraste lo da el borde de 1 px.
   ============================================================ */

/* Las dos flechas van juntas ABAJO A LA DERECHA, como en las galerías de
   apple.com, y no flotando sobre los bordes del carril: ahí no se veían.
   Siempre presentes; la que no se puede usar se atenúa (no desaparece), que es
   justo lo que hace Apple y lo que mantiene el mando visible. */
.rail-wrap { position: relative; }

.rail-nav {
  display: flex; justify-content: flex-end; gap: .625rem;
  margin: 1.5rem var(--gutter) 0 0;
}

.paddle {
  width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  appearance: none; cursor: pointer;
  border: 0; border-radius: 999px;
  background: rgba(0,0,0,.05);
  color: var(--ink);
  transition: background .25s var(--step), transform .25s var(--step), opacity .25s var(--step);
  -webkit-tap-highlight-color: transparent;
}
.paddle svg { width: 22px; height: 22px; display: block; }
.paddle[disabled] { opacity: .32; cursor: default; }
@media (hover: hover) {
  .paddle:not([disabled]):hover { background: rgba(0,0,0,.1); transform: scale(1.06); }
}
.paddle:not([disabled]):active { transform: scale(.94); }

@media (prefers-reduced-motion: reduce) {
  .paddle { transition: background .25s linear, opacity .25s linear; }
  .paddle:hover, .paddle:active { transform: none; }
}

/* ============================================================
   RECONOCIMIENTO
   ============================================================ */

.said {
  font-size: clamp(1.125rem, 3.2vw, 1.3125rem);
  line-height: 1.5; color: var(--muted);
  max-width: 34rem; margin: 0 auto;
  text-align: center;
}
.said + .said { margin-top: 1.25rem; }
.said--turn { color: var(--ink); font-weight: 600; }

/* ============================================================
   PASOS Y CIFRAS
   ============================================================ */

.steps { display: grid; gap: 1.75rem; max-width: var(--w-mid); margin: 2.75rem auto 0; }
@media (min-width: 48rem) { .steps { grid-template-columns: repeat(2, 1fr); gap: 2.25rem 3rem; } }

.step { display: flex; gap: 1rem; align-items: flex-start; }
.step-n {
  flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 999px;
  background: var(--ink); color: #FFFFFF;
  display: grid; place-items: center;
  font-size: var(--t-sm); font-weight: 700; font-variant-numeric: tabular-nums;
}
.step p { color: var(--muted); }

.stats {
  display: grid; gap: 2.25rem;
  max-width: var(--w-mid); margin: 4rem auto 0;
  text-align: center;
}
@media (min-width: 40rem) { .stats { grid-template-columns: repeat(3, 1fr); } }

.stat b {
  display: block;
  font-size: clamp(2.5rem, 9vw, 3.75rem);
  font-weight: 700; letter-spacing: var(--tr-xd); line-height: 1;
}
.stat span { display: block; margin-top: .625rem; font-size: var(--t-sm); color: var(--muted); }

/* ============================================================
   BENTO · tarjetas grandes
   ============================================================ */

.bento { display: grid; gap: 1rem; }
@media (min-width: 48rem) { .bento { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } }

.tile {
  background: var(--bg);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  display: flex; flex-direction: column;
}
.block--alt .tile { background: var(--bg); }
.tile h3 { margin-bottom: .875rem; }
.tile p { color: var(--muted); }
.tile .eyebrow { margin-bottom: .625rem; }

/* Reacción al puntero, tomada de las tarjetas de apple.com (`card-hover`),
   pero SIN sombra: la regla de la marca es borde de 1 px y nunca sombra. El
   relieve lo dan una elevación mínima y el borde, que se oscurece. Solo con
   puntero real, para que en táctil no se quede «pegado» tras el toque. */
@media (hover: hover) {
  .tile, .rail-card {
    transition: transform .45s var(--step), border-color .45s var(--step);
  }
  /* La tarjeta CRECE, que es el gesto de apple.com. Antes solo se elevaba y
     apenas se notaba. Sin sombra: el relieve lo dan el tamaño y el borde. */
  .tile:hover, .rail > li:hover .rail-card {
    transform: scale(1.02);
    border-color: #D2D2D6;
  }
  @media (prefers-reduced-motion: reduce) {
    .tile, .rail-card { transition: border-color .3s linear; }
    .tile:hover, .rail > li:hover .rail-card { transform: none; }
  }
}


/* ============================================================
   HUECOS DE IMAGEN · 04.3
   ============================================================ */

.ph {
  display: grid; place-items: center; text-align: center;
  background: var(--bg-alt);
  border: 1px dashed #D2D2D6;
  border-radius: 18px;
  color: var(--muted); font-size: var(--t-sm);
  padding: 1rem;
}
.ph-hero  { aspect-ratio: 16 / 10; margin: 2.75rem auto 0; max-width: 46rem; }
.ph-tab   { aspect-ratio: 4 / 3; }
.ph-wide  { aspect-ratio: 16 / 9; margin-bottom: 1.75rem; }
.ph-video { aspect-ratio: 16 / 10; }
.ph-cover { aspect-ratio: 1 / 1.414; max-width: 15rem; margin: 0 auto; }

figure.loop { margin: 0 auto; max-width: var(--w-mid); }
figure.loop figcaption {
  margin-top: 1rem; text-align: center;
  font-size: var(--t-sm); color: var(--muted);
}
.loop-note {
  margin: 3rem auto 0; max-width: var(--w-text);
  text-align: center; color: var(--muted); font-size: var(--t-sm);
}

/* Imágenes montadas (04.3). Cada .shot-* copia la geometría de su hueco
   .ph-*, así que el intercambio caja->imagen no mueve el layout: la caja ya
   reservaba el aspect-ratio. Borde de 1px (nunca sombra) que define las
   capturas de fondo claro contra la tarjeta blanca. */
.shot {
  display: block; width: 100%; height: auto;
  border: 0;                        /* sin borde: la imagen se funde con el blanco de la tarjeta y del fondo */
  border-radius: 0;                 /* sin redondeo: fiel a la captura, y coherente en TODAS las imagenes */
  background: transparent;
  object-fit: cover;
}
.shot-tab   { aspect-ratio: 4 / 3; }
.shot-wide  { aspect-ratio: 16 / 9; margin-bottom: 1.75rem; }
.shot-video { aspect-ratio: 16 / 10; }

/* Portadas de ebook (§7). Retrato A4, centradas en su tarjeta. Borde de 1px
   (nunca sombra) para que la portada, casi blanca, se lea como una página y no
   flote sobre el blanco de la tarjeta. object-fit: contain porque es la imagen
   completa, no un recorte. */
.shot-cover {
  aspect-ratio: 1000 / 1414; object-fit: contain;
  max-width: 15rem; margin: 0 auto;
  border: 1px solid var(--card-line); border-radius: 0;
}

/* Conmutador claro/oscuro (§7b). Mockups de MacBook sobre blanco opaco (fondo
   blanco = fondo de la sección, así que sin borde). Recortadas al MacBook (se
   quitó el aire blanco de los lados) para que llene más; el MISMO recorte en
   claro y oscuro, así que siguen alineadas al píxel y el cross-fade solo cambia
   el color. contain para no deformar. */
.shot-looks { aspect-ratio: 2000 / 1230; object-fit: contain; }

/* Net Worth (5.ª card): la imagen completa es más ancha que 4:3, así que
   contain la muestra entera dentro del hueco 4:3; el sobrante es blanco (= el
   blanco de la tarjeta), invisible. Va después de .shot para ganarle el
   object-fit: cover de la base. */
.shot-fit { object-fit: contain; }

/* Vídeo de la sección de setup, ya recortado al MacBook. Mismo trato que las
   capturas de "Two looks": mockup sobre fondo casi blanco que funde con la
   sección, sin borde. */
.shot-loop {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1256 / 766; object-fit: contain;
  /* Fondo BLANCO. Un <video> pinta de negro lo que no cubre el fotograma, y al
     redondear el alto a píxeles enteros queda una franja de 1 px que asomaba
     como un marco negro intermitente. Con el fondo en blanco esa franja se
     funde con la sección. */
  background: #FFFFFF;
}
.shot-loop[controls] { outline: 1px solid var(--card-line); }

/* Foto del paquete al arranque de la oferta. Transparente, flota sobre el velo.
   No lleva la clase base .shot: define su propia geometría. */
.shot-package {
  display: block; width: 100%; height: auto;
  max-width: 52rem; margin: 0 auto 2.5rem;
  aspect-ratio: 2200 / 1387; object-fit: contain;
  /* Empuje óptico a la derecha: la composición pesa a la izquierda (portadas +
     iPad) y deja aire a la derecha. Con `left` (no transform: la anima .reveal).
     Bajado de 2,5% a 1%: con 2,5% se pasaba de frenada hacia la derecha. */
  position: relative; left: 1%;
}

/* Hero: PNG transparente de los dos dispositivos. Sin caja, sin borde, sin
   fondo (los hereda de .shot en 0). object-fit: contain porque es transparente
   y no queremos recorte alguno. La aspect-ratio reserva el hueco exacto para
   que no haya salto de layout mientras carga. */
.shot-hero {
  display: block; width: 100%; height: auto;
  aspect-ratio: 2200 / 943;
  object-fit: contain;
  max-width: 60rem;
  margin: 2.75rem auto 0;
  /* Empuje óptico a la derecha (Ajuste A). La geometría está centrada
     (centroide 0,494), pero el iPad OSCURO de la izquierda pesa más que el
     MacBook claro de la derecha, así que el ojo la percibe caída a la
     izquierda. Se corrige con `left` (posición), no con transform, porque la
     animación de entrada .reveal usa transform y lo resetearía a none. */
  position: relative; left: 2%;
}

/* ============================================================
   OFERTA
   ============================================================ */

.offer-card {
  max-width: var(--w-mid); margin: 0 auto;
  background: var(--bg);
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  padding: 2.25rem 1.75rem;
}
@media (min-width: 48rem) { .offer-card { padding: 3rem 3rem 2.75rem; } }

.stack { display: grid; gap: 1.125rem; }
.stack li { display: flex; gap: .875rem; align-items: flex-start; color: var(--ink); }
.stack svg { flex: 0 0 auto; margin-top: .25rem; color: var(--ink); }

.note { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.note-title {
  font-size: var(--t-sm); font-weight: 600;
  letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--muted);
  margin-bottom: 1rem;
}
.note-list { display: grid; gap: .75rem; color: var(--muted); font-size: var(--t-md); }

.delivery { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--line); color: var(--muted); }
.delivery p + p { margin-top: .5rem; }

.pricebox { margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--line); text-align: center; }
.metric {
  font-size: clamp(3rem, 12vw, 4.5rem);
  font-weight: 700; letter-spacing: var(--tr-xd); line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* El $49 tachado. SOLO existe con ?ref=: para el tráfico directo el precio
   es $49 a secas y no se anuncia ninguna rebaja. Va ENCIMA de la cifra y no
   al lado, para que se lea en el orden correcto: primero lo que cuesta,
   después lo que cuesta con el código. */
.was {
  font-size: var(--t-xl); font-weight: 600; color: var(--muted);
  text-decoration: line-through; text-decoration-thickness: 2px;
  font-variant-numeric: tabular-nums; margin-bottom: .375rem;
}
.was[hidden] { display: none; }
.pricebox .terms { margin-top: .75rem; color: var(--muted); font-size: var(--t-sm); }
.code-line { margin-top: .625rem; font-size: var(--t-sm); font-weight: 600; color: var(--ink); }
.code-line[hidden] { display: none; }
.pricebox .btn { margin-top: 1.75rem; }

/* El tachado dentro de una línea de precio (hero, cierre, barra). */
.price s { color: var(--muted); text-decoration-thickness: 2px; margin-right: .375rem; font-weight: 600; }

/* ============================================================
   SELECTOR DE CLARO / OSCURO
   El mecanismo del conmutador 11″ / 13″ de Apple. Sin JavaScript se ven
   las DOS imágenes, etiquetadas; con JavaScript se convierte en selector.
   Así nunca hay contenido escondido detrás de un botón que no funciona.
   ============================================================ */

.looks { max-width: var(--w-mid); margin: 0 auto; }
.looks-figs { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .looks-figs { grid-template-columns: repeat(2, 1fr); } }
.looks-fig figcaption {
  margin-top: .75rem; text-align: center;
  font-size: var(--t-sm); font-weight: 600; letter-spacing: var(--tr-caps);
  text-transform: uppercase; color: var(--muted);
}
.looks-switch { display: none; }

/* Con JS: un solo hueco a la vez y el conmutador visible. */
.js-looks .looks-figs { grid-template-columns: 1fr; }
/* Ambas figuras apiladas en la MISMA celda de rejilla, para poder fundir de
   una a otra en vez de un corte seco. La activa a opacity 1, la otra a 0. */
.js-looks .looks-fig { grid-column: 1; grid-row: 1; opacity: 0; transition: opacity .4s var(--step); }
.js-looks .looks-fig.is-active { opacity: 1; }
.js-looks .looks-fig:not(.is-active) { pointer-events: none; }
.js-looks .looks-fig figcaption { display: none; }
.js-looks .looks-switch {
  position: relative; isolation: isolate;
  display: inline-flex; gap: 0; margin: 0 auto 2rem;
  padding: .25rem; border-radius: 999px;
  background: rgba(0,0,0,.05);
}
/* La pastilla blanca ya no salta de un botón a otro: es UNA sola pieza que se
   desliza con transform (GPU). La curva es de desaceleración pura, sin rebote:
   sale rápido y frena largo, que es el gesto de los selectores de Apple. Los
   dos botones miden lo mismo (flex-basis 0), así que la pastilla mide justo
   media pastillera y translateX(100%) la deja clavada sobre el segundo. */
.js-looks .looks-switch::before {
  content: ""; position: absolute; z-index: -1;
  top: .25rem; bottom: .25rem; left: .25rem;
  width: calc(50% - .25rem);
  border-radius: 999px; background: var(--bg);
  transition: transform .45s cubic-bezier(.32,.72,0,1);
}
.js-looks .looks-switch[data-look-active="light"]::before { transform: translateX(100%); }
.looks-switch button {
  position: relative;
  appearance: none; border: 0; cursor: pointer;
  flex: 1 1 0; min-width: 5.75rem;
  min-height: 44px; padding: 0 1.375rem; border-radius: 999px;
  font: inherit; font-size: var(--t-sm); font-weight: 600; letter-spacing: var(--tr-ui);
  color: var(--muted); background: transparent;
  /* El texto cambiaba de color en .3 s y la pastilla tardaba .45 s: el negro
     llegaba antes que el fondo blanco y el botón parpadeaba. Ahora el color
     viaja con la pastilla (misma duración y curva) y arranca un pelín después,
     así que el texto se oscurece justo cuando la pastilla llega debajo. */
  transition: color .45s var(--step) .06s;
  /* iOS pinta un rectángulo gris al tocar; con la pastilla animada debajo se
     veía como un salto sucio. */
  -webkit-tap-highlight-color: transparent;
}
.looks-switch button[aria-pressed="true"] { color: var(--ink); }
/* Sin JS la pastilla no existe, así que ahí el estado sí se pinta de fondo. */
html:not(.js-looks) .looks-switch button[aria-pressed="true"] { background: var(--bg); }

@media (prefers-reduced-motion: reduce) {
  .js-looks .looks-switch::before { transition: none; }
}
.looks-row { display: flex; justify-content: center; }

.guarantee { margin-top: 2.25rem; padding-top: 2rem; border-top: 1px solid var(--line); text-align: center; }
.guarantee h2 { font-size: clamp(1.625rem, 5vw, 2.25rem); }
.guarantee p { margin-top: 1rem; color: var(--muted); max-width: 30rem; margin-inline: auto; }

/* ============================================================
   RESEÑAS · RETIRADAS de la página en GTM-13. El CSS se queda a propósito:
   reponerlas es pegar el HTML guardado en gtm/landing/06-resenas.md
   ============================================================ */

/* Reseñas SIEMPRE en columna (una debajo de otra), a todos los anchos: en fila
   el texto se estrecha y se lee peor. Ancho de lectura acotado y centrado para
   que las líneas no se hagan demasiado largas en escritorio. */
.grid-3 { display: grid; gap: 1.25rem; max-width: 40rem; margin-inline: auto; }
/* Prueba social de la franja de confianza. Bloque compacto sobre el gris del
   sistema, NO una tarjeta blanca con borde: las tarjetas son el lenguaje de la
   sección de reseñas de más abajo, y repetirlo aquí hacía que pareciese la
   misma sección dos veces. Aquí basta con que se lea «esto lo dijo alguien». */
/* Misma estructura que las reseñas de abajo (titular en tinta, cita en gris,
   nombre), porque es lo que les da presencia; el fondo gris se queda porque
   sobre el blanco de esta sección es lo que la despega de los cuatro hechos.
   Alineada a la izquierda como las de abajo: centrada parecía un eslogan. */
.proof {
  max-width: 38rem;
  margin: 3.5rem auto 0;
  background: var(--bg-alt); border-radius: var(--radius);
  padding: 1.875rem 2rem;
  text-align: left;
}
.proof-head {
  color: var(--ink); font-weight: 600;
  font-size: var(--t-lg); letter-spacing: var(--tr-h);
}
.proof blockquote {
  margin: .625rem 0 0;
  font-size: var(--t-md); line-height: 1.55; color: var(--muted);
}
.proof figcaption {
  margin-top: 1.1rem; font-size: var(--t-sm); font-weight: 600; color: var(--ink);
}

.card--review { text-align: left; }
.card--review p { color: var(--muted); font-size: var(--t-md); }
.card--review p + p { margin-top: .625rem; }
.card--review .review-head { color: var(--ink); font-weight: 600; font-size: var(--t-lg); }
.card--review .review-by { margin-top: 1.1rem; color: var(--ink); font-size: var(--t-sm); }
.card--review .review-by b { font-weight: 600; }

/* ============================================================
   FAQ
   ============================================================ */

.faq { max-width: var(--w-mid); margin: 0 auto; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 1.25rem;
  padding: 1.5rem 0; cursor: pointer; list-style: none;
  font-size: var(--t-lg); font-weight: 600; letter-spacing: var(--tr-h);
  min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: 0 0 auto; width: 13px; height: 13px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .25s var(--step);
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq p { padding-bottom: 1.625rem; color: var(--muted); max-width: 40rem; }

/* ============================================================
   CIERRE Y PIE
   ============================================================ */

#close { text-align: center; }
.echo { margin-top: 1.5rem; font-size: var(--t-lg); color: var(--muted); }

#footer { padding: 3.5rem 0; border-top: 1px solid var(--line); }
.footer-links { display: flex; flex-wrap: wrap; gap: .25rem 2rem; font-size: var(--t-sm); }
/* 44 px de alto también aquí. Medidos, estos enlaces daban 17 px: por debajo
   incluso del mínimo de 24 px de WCAG 2.5.8, y son los únicos de la página
   que fallaban. El `padding` los sube sin tocar el tamaño de letra. */
.footer-links a, .affiliate a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--muted); text-decoration: none;
}
.footer-links a:hover, .affiliate a:hover { color: var(--ink); }
.copy { margin-top: 1.75rem; font-size: var(--t-sm); color: var(--muted); }
.affiliate { font-size: var(--t-sm); }

/* ============================================================
   PÁGINAS LEGALES · refund.html / privacy.html / terms.html
   Reusan <head>, footer y tokens. Columna de texto estrecha, prosa sobria,
   misma tipografía que el resto de la web.
   ============================================================ */
/* Menos aire arriba y columna MÁS ANCHA que la de lectura por defecto (38rem):
   son documentos, no un artículo, y con 38 rem quedaban dos márgenes enormes.
   52 rem sigue dando una línea legible sin desperdiciar la pantalla. */
.legal-page { padding: 2rem 0 4.5rem; }
@media (min-width: 48rem) { .legal-page { padding: 2.75rem 0 6rem; } }
.legal-page .inner--text { max-width: var(--w-mid); }

/* El enlace de vuelta va pegado al margen izquierdo, no centrado con el texto:
   es navegación, no parte del documento. */
.legal-back { margin-bottom: 2.25rem; font-size: var(--t-sm); font-weight: 600; }
.legal-back a {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px; margin-left: -.15rem;
  color: var(--muted); text-decoration: none;
  transition: color .2s var(--step);
}
.legal-back a:hover { color: var(--ink); }
.legal-back a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
@media (min-width: 64rem) {
  /* En pantallas anchas se saca del ancho del texto para que quede en la
     esquina, alineado con el borde real de la página. */
  .legal-back { margin-left: calc((var(--w-mid) - var(--w-wide)) / 2); }
}
.legal h1 {
  font-size: clamp(2rem, 6vw, 2.75rem); font-weight: 700;
  letter-spacing: var(--tr-d); line-height: 1.1;
}
.legal > p:first-of-type { margin-top: 1.25rem; font-size: var(--t-lg); color: var(--ink); }
.legal h2 {
  margin-top: 2.5rem; font-size: var(--t-xl); font-weight: 600;
  letter-spacing: var(--tr-h); line-height: 1.2;
}
.legal p { margin-top: .75rem; color: var(--muted); }
.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.legal .updated { margin-top: 3rem; font-size: var(--t-sm); color: var(--muted); }

/* ============================================================
   BARRAS
   ============================================================ */

#promo-bar {
  padding: .8125rem var(--gutter);
  background: var(--ink); color: #FFFFFF;
  font-size: var(--t-sm); font-weight: 600;
  letter-spacing: var(--tr-ui); text-align: center;
}

#buy-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  min-height: var(--bar-h);
  padding: .75rem var(--gutter);
  padding-bottom: calc(.75rem + env(safe-area-inset-bottom, 0px));
  /* Cristal a la manera de Apple: más transparente y con MÁS desenfoque. Las
     dos cosas van juntas: bajar la opacidad sin subir el blur deja leer el
     contenido de debajo y ensucia el texto; con el desenfoque alto, lo de
     detrás se convierte en manchas de color y el texto sigue limpio.
     La saturación alta es lo que evita que el color colado por debajo se vea
     lavado, que es el truco que da la sensación de vidrio y no de plástico. */
  background: rgba(255,255,255,.66);
  -webkit-backdrop-filter: saturate(200%) blur(24px);
          backdrop-filter: saturate(200%) blur(24px);
  border-top: 1px solid rgba(0,0,0,.07);
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
}
/* Sin soporte de backdrop-filter no hay desenfoque, así que el fondo tiene que
   volver a ser casi opaco o el texto quedaría sobre la página en movimiento. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #buy-bar { background: rgba(255,255,255,.96); }
}

#buy-bar .price { margin-top: 0; font-size: var(--t-sm); }
#buy-bar .btn { flex: 0 0 auto; min-height: 44px; padding: 0 1.25rem; font-size: var(--t-sm); }

.js-bar #buy-bar {
  transform: translateY(115%); visibility: hidden;
  transition: transform .28s var(--step), visibility .28s;
}
.js-bar #buy-bar.is-on { transform: none; visibility: visible; }

@media (min-width: 64rem) { #buy-bar { justify-content: center; gap: 2rem; } }

/* ============================================================
   ANIMACIÓN DE ENTRADA
   Las clases de partida las pone main.js: sin JS no hay nada oculto.
   ============================================================ */

/* El BARRIDO del degradado en los titulares se probó y se retiró: aplanaba el
   color de los titulares, que es lo que mejor funcionaba de la página. Los
   degradados se quedan estáticos, tal y como estaban.

   La entrada sí se acerca más a la de apple.com: recorrido más largo (28 px),
   más lenta y con el escalonado más marcado (lo pone main.js en --d). */
.js .reveal { opacity: 0; transform: translateY(28px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .9s var(--step) var(--d, 0ms), transform .9s var(--step) var(--d, 0ms);
}

/* Dentro del carrusel, la entrada es SOLO opacidad. Un `transform` sobre
   los hijos de un contenedor con scroll-snap le hace recalcular el enganche
   a mitad de animación, y ahí es donde saltaba. */
.js .rail > .reveal { transform: none; }
.js .rail > .reveal.is-in { transition: opacity .6s var(--step) var(--d, 0ms); }

/* Aquí NO se trocean los titulares en palabras, al contrario que en la
   versión A. El degradado se recorta a la caja del elemento: si `.grad` se
   partiera en cinco `<span>`, cada palabra pintaría el arcoíris entero y se
   vería repetido cinco veces. Los titulares entran como bloque, que además
   es lo que hace Apple (data-textanim). */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-bar #buy-bar { transition: none; }
  .rail { scroll-snap-type: none; }
  .looks-switch button { transition: none; }
  .js-looks .looks-fig { transition: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}