/* Aura · landing de auragymtracker.app
   Tokens de docs/diseno.md (claro y oscuro) y aura de marca de AuraActiveAura.swift:
   degradado angular morado → magenta → rosa → coral que gira una vuelta cada 16 s,
   opacidad en seno entre 0.45 y 0.62 cada 5.5 s y anillo fijo de 2 px al 85 %.
   Solo la luz se mueve; el contenido queda quieto. Con Reducir movimiento, todo fijo. */

@property --giro {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

:root {
  --lienzo: #F5F5F5;
  --superficie: #FFFFFF;
  --pista: #EBEBEB;
  --texto: #0A0A0A;
  --texto-2: #666666;
  --borde: #E0E0E0;
  --invertido: #0A0A0A;
  --sobre-invertido: #FFFFFF;
  --nav-fondo: rgba(245, 245, 245, 0.74);
  --sombra-iphone: 0 50px 90px -40px rgba(10, 10, 10, 0.45), 0 20px 40px -24px rgba(10, 10, 10, 0.3);
  --sombra-tarjeta: 0 1px 2px rgba(10, 10, 10, 0.04);

  --morado: #75226D;
  --magenta: #AC4389;
  --rosa: #D87788;
  --coral: #F3A17E;
  --degradado-aura: conic-gradient(from 0deg, var(--morado), var(--magenta), var(--rosa), var(--coral), var(--morado));

  --aura-minima: 0.45;
  --aura-maxima: 0.62;
  --aura-fija: 0.535;
  /* La luz ambiental respira con el mismo ritmo, más intensa porque vive lejos del contenido. */
  --ambiente-minima: 0.72;
  --ambiente-maxima: 0.9;
  --anillo-opacidad: 0.85;
  --ciclo-giro: 16s;
  --medio-ciclo-aura: 2.75s;

  --curva: cubic-bezier(0.22, 1, 0.36, 1);
  --seno: cubic-bezier(0.37, 0, 0.63, 1);
  --suave: cubic-bezier(0.4, 0, 0.2, 1);

  --margen: clamp(16px, 4vw, 32px);
  --radio-grande: clamp(28px, 3.4vw, 40px);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --lienzo: #0A0A0A;
    --superficie: #161616;
    --pista: #2A2A2A;
    --texto: #FFFFFF;
    --texto-2: #9A9A9A;
    --borde: #2A2A2A;
    --invertido: #FFFFFF;
    --sobre-invertido: #0A0A0A;
    --nav-fondo: rgba(10, 10, 10, 0.7);
    --sombra-iphone: 0 50px 90px -40px rgba(0, 0, 0, 0.9), 0 20px 40px -24px rgba(0, 0, 0, 0.7);
    --sombra-tarjeta: none;
  }
}

/* Base */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

body {
  margin: 0;
  background: var(--lienzo);
  color: var(--texto);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, figure, ul { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2 { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-weight: 700; text-wrap: balance; }
h3 { font-weight: 600; }
p { text-wrap: pretty; }

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

.contenedor { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--margen); }

.saltar {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 100;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--invertido);
  color: var(--sobre-invertido);
  font-weight: 600;
  text-decoration: none;
}
.saltar:focus { top: 12px; }

/* Presión: fundido de opacidad como en la app (120 ms al tocar, 180 ms al soltar), sin escala. */
a[href], summary { transition: opacity 0.18s var(--suave); -webkit-tap-highlight-color: transparent; }
a[href]:active, summary:active { opacity: 0.55; transition-duration: 0.12s; }

/* Navegación */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--nav-fondo);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--suave);
}
.nav.con-borde { border-bottom-color: var(--borde); }
.nav__interior { display: flex; align-items: center; gap: 24px; height: 64px; }

.marca { display: inline-flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; text-decoration: none; }
.marca img { width: 28px; height: 28px; }

.nav__enlaces { display: flex; gap: 28px; margin-inline: auto; font-size: 15px; }
.nav__enlaces a { color: var(--texto-2); text-decoration: none; transition: color 0.18s var(--suave), opacity 0.18s var(--suave); }
.nav__enlaces a:hover { color: var(--texto); }

.nav__acciones { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.nav__enlaces + .nav__acciones { margin-left: 0; }

.idioma { display: flex; align-items: center; gap: 4px; font-size: 14px; color: var(--texto-2); }
.idioma a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 4px; color: var(--texto-2); text-decoration: none; }
.idioma a[aria-current] { color: var(--texto); font-weight: 600; }

.boton {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding-inline: 16px;
  border-radius: 999px;
  background: var(--invertido);
  color: var(--sobre-invertido);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.boton::before { content: ""; position: absolute; inset: -4px 0; }

@media (max-width: 760px) {
  .nav__enlaces { display: none; }
}

/* Llamado a App Store. La insignia oficial de Apple va tal cual: sin animación, efectos ni cambios, con un cuarto
   de su alto como aire libre alrededor y una sola por página. Antes de la 2.0 se muestra un botón de texto. */

.boton--grande { min-height: 52px; padding-inline: 24px; font-size: 17px; }
.boton--grande::before { display: none; }

.insignia-apple { display: inline-block; }
.insignia-apple img { width: auto; height: 54px; }

html[data-tienda="pronto"] [data-solo="disponible"],
html[data-tienda="disponible"] [data-solo="pronto"] { display: none !important; }

/* Aura de marca: luz ambiental detrás de teléfonos y paneles */

/* La caja es siempre cuadrada: la luz gira como círculo y la caja la aplasta con `scale`, así solo se mueven los colores. */
.aura {
  position: absolute;
  aspect-ratio: 1;
  pointer-events: none;
  opacity: var(--ambiente-maxima);
  animation: respirar-ambiente var(--medio-ciclo-aura) var(--seno) infinite alternate;
}
.aura__luz {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--degradado-aura);
  filter: blur(var(--difuso, 64px));
  animation: girar var(--ciclo-giro) linear infinite;
  animation-delay: var(--desfase, 0s);
}

@keyframes girar { to { transform: rotate(1turn); } }
@keyframes girar-degradado { to { --giro: 360deg; } }
@keyframes respirar {
  from { opacity: var(--aura-minima); }
  to { opacity: var(--aura-maxima); }
}
@keyframes respirar-ambiente {
  from { opacity: var(--ambiente-minima); }
  to { opacity: var(--ambiente-maxima); }
}

/* Aura de estado (rutina activa): luz pegada al contorno que sale solo hacia afuera, más el anillo fijo. */

.halo {
  position: absolute;
  inset: calc(var(--salida) * -1);
  z-index: 0;
  overflow: hidden;
  border-radius: calc(var(--radio) + var(--salida));
  filter: blur(var(--difuso-halo));
  opacity: var(--aura-fija);
  animation: respirar var(--medio-ciclo-aura) var(--seno) infinite alternate;
  pointer-events: none;
}
.halo__giro {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: var(--degradado-aura);
  animation: girar var(--ciclo-giro) linear infinite;
}

.anillo {
  position: absolute;
  inset: -4px;
  z-index: 0;
  padding: 2px;
  border-radius: calc(var(--radio) + 4px);
  background: conic-gradient(from 0deg, var(--morado), var(--magenta), var(--rosa), var(--coral), var(--morado));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  filter: blur(0.75px);
  opacity: var(--anillo-opacidad);
  pointer-events: none;
}

/* Teléfono genérico (sin isla ni detalles propios del iPhone, como piden las pautas de Apple); --ancho manda las medidas. */

.iphone { --bisel: calc(var(--ancho) * 0.034); --radio: calc(var(--ancho) * 0.163); position: absolute; width: var(--ancho); }
.iphone__cuerpo {
  position: relative;
  z-index: 1;
  display: block;
  padding: var(--bisel);
  border-radius: var(--radio);
  background: #0B0B0C;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), var(--sombra-iphone);
}
.iphone__cuerpo img { width: 100%; border-radius: calc(var(--radio) - var(--bisel)); background: #F5F5F5; }

/* Inicio */

.hero { position: relative; padding-top: clamp(40px, 8vw, 96px); overflow: clip; }
.hero__texto { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; }

.chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding-inline: 14px;
  border-radius: 999px;
  background: var(--pista);
  color: var(--texto-2);
  font-size: 14px;
  font-weight: 500;
}

h1 { margin-top: 24px; font-size: clamp(48px, 9.4vw, 104px); line-height: 0.98; letter-spacing: -0.045em; }
.hero__sub { max-width: 32em; margin-top: 22px; color: var(--texto-2); font-size: clamp(17px, 2.1vw, 20px); line-height: 1.45; }
.hero__cta { margin-top: 32px; }

.hero__escena {
  --ancho-centro: clamp(240px, 27vw, 330px);
  position: relative;
  height: clamp(420px, 52vw, 640px);
  margin-top: clamp(48px, 7vw, 80px);
}
/* Los teléfonos se pierden en el lienzo al final del inicio. */
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: 4;
  height: clamp(96px, 12vw, 160px);
  background: linear-gradient(to bottom, transparent, var(--lienzo));
  pointer-events: none;
}

.aura--hero {
  left: 50%;
  top: 4%;
  width: calc(var(--ancho-centro) * 1.75);
  translate: -50% 0;
  scale: 1.75 1;
  --difuso: clamp(36px, 4.6vw, 60px);
}

.iphone--centro { --ancho: var(--ancho-centro); --salida: 6px; --difuso-halo: 14px; left: 50%; top: 0; z-index: 3; margin-left: calc(var(--ancho) / -2); }
.iphone--lado { --ancho: calc(var(--ancho-centro) * 0.86); top: 11%; z-index: 2; }
.iphone--izquierda { left: 50%; margin-left: calc(var(--ancho-centro) * -0.5 - var(--ancho) * 0.74); }
.iphone--derecha { left: 50%; margin-left: calc(var(--ancho-centro) * 0.5 - var(--ancho) * 0.26); }
.iphone--lado .iphone__cuerpo { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 30px 60px -30px rgba(10, 10, 10, 0.35); }

/* Entrada al cargar: el texto sube en turnos y los teléfonos se abren desde el centro. */
.js .entrar { animation: entrar 0.8s var(--curva) both; animation-delay: calc(var(--orden) * 90ms + 80ms); }
.js .iphone--centro { animation: subir 1.1s var(--curva) 0.28s both; }
.js .iphone--izquierda { animation: abrir-izquierda 1.2s var(--curva) 0.5s both; }
.js .iphone--derecha { animation: abrir-derecha 1.2s var(--curva) 0.5s both; }
.js .aura--hero .aura__luz { animation: girar var(--ciclo-giro) linear infinite, aparecer 1.8s var(--suave) 0.2s both; }

@keyframes entrar { from { opacity: 0; transform: translateY(14px); } }
@keyframes subir { from { opacity: 0; transform: translateY(56px); } }
@keyframes abrir-izquierda { from { opacity: 0; transform: translate(42%, 36px); } }
@keyframes abrir-derecha { from { opacity: 0; transform: translate(-42%, 36px); } }
@keyframes aparecer { from { opacity: 0; } }

/* Aparición al desplazar */
.js .revelar { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--curva), transform 0.8s var(--curva); transition-delay: calc(var(--orden, 0) * 80ms); }
.js .revelar.visible { opacity: 1; transform: none; }

/* Valores */

.valores { position: relative; z-index: 1; padding-block: clamp(40px, 6vw, 72px) clamp(24px, 4vw, 40px); }
.valores__lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.valor { display: flex; flex-direction: column; gap: 14px; }
.valor__icono { width: 44px; height: 44px; padding: 10px; border: 1px solid var(--borde); border-radius: 50%; background: var(--superficie); }
.valor h3 { font-size: 17px; letter-spacing: -0.01em; }
.valor p { margin-top: 4px; color: var(--texto-2); font-size: 15px; }

@media (max-width: 860px) {
  .valores__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
}

/* Secciones */

.seccion { padding-block: clamp(64px, 8vw, 104px); }
.seccion__cabeza { display: flex; flex-direction: column; align-items: center; gap: 16px; max-width: 760px; margin: 0 auto clamp(40px, 6vw, 64px); text-align: center; }
.seccion__cabeza p { max-width: 34em; color: var(--texto-2); font-size: clamp(17px, 2vw, 19px); }
h2 { font-size: clamp(36px, 5.6vw, 60px); line-height: 1.04; letter-spacing: -0.038em; }

/* Funciones */

.funciones__rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

.tarjeta {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  background: var(--superficie);
  box-shadow: var(--sombra-tarjeta);
}
.tarjeta__texto { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 8px; padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 36px) 0; }
.tarjeta h3 { font-size: clamp(22px, 2.4vw, 26px); line-height: 1.15; letter-spacing: -0.025em; font-weight: 700; }
.tarjeta p { max-width: 26em; color: var(--texto-2); font-size: 16px; }

.tarjeta__escena { position: relative; height: clamp(360px, 36vw, 440px); margin-top: 28px; overflow: hidden; }
.iphone--tarjeta { --ancho: clamp(220px, 22vw, 268px); left: 50%; top: 0; margin-left: calc(var(--ancho) / -2); transition: transform 0.6s var(--curva); }
.tarjeta__escena--abajo .iphone--tarjeta { top: auto; bottom: clamp(24px, 3vw, 36px); }
/* El teléfono anclado abajo asoma desde el texto con un fundido corto, sin corte recto. */
.tarjeta__escena--abajo { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 72px); mask-image: linear-gradient(to bottom, transparent, #000 72px); }
.iphone--tarjeta .iphone__cuerpo { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), 0 30px 60px -32px rgba(10, 10, 10, 0.4); }

.aura--tarjeta { left: 50%; top: 30%; width: min(440px, 84%); translate: -50% 0; scale: 1.25 0.9; --difuso: 52px; }
.aura--tarjeta-1 { --desfase: -4s; top: 26%; }
.aura--tarjeta-2 { --desfase: -8s; }
.aura--tarjeta-3 { --desfase: -12s; }

@media (hover: hover) {
  .tarjeta:hover .iphone--tarjeta { transform: translateY(-8px); }
}

@media (max-width: 760px) {
  .funciones__rejilla { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* Privacidad: panel siempre oscuro con la luz entrando por arriba */

.privacidad { padding-inline: clamp(16px, 2vw, 24px); }
.privacidad__panel {
  position: relative;
  isolation: isolate;
  max-width: 1280px;
  margin-inline: auto;
  overflow: hidden;
  padding-block: clamp(72px, 10vw, 120px);
  border-radius: var(--radio-grande);
  background: #0A0A0A;
  color: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.aura--privacidad { left: 50%; top: 0; width: min(680px, 100%); translate: -50% -60%; scale: 1.7 0.42; --difuso: clamp(44px, 5vw, 72px); }
.privacidad__interior { position: relative; z-index: 1; }
.privacidad .seccion__cabeza p { color: #9A9A9A; }
.eyebrow { color: #9A9A9A; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }

.privacidad__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.privacidad__tarjeta { display: flex; flex-direction: column; gap: 6px; padding: 28px; border: 1px solid #2A2A2A; border-radius: 24px; background: rgba(22, 22, 22, 0.82); }
.privacidad__icono { width: 44px; height: 44px; margin-bottom: 10px; padding: 10px; border-radius: 50%; background: #2A2A2A; }
.privacidad__tarjeta h3 { font-size: 19px; letter-spacing: -0.015em; }
.privacidad__tarjeta p { color: #9A9A9A; font-size: 16px; }
.privacidad__enlace { margin-top: 32px; text-align: center; font-size: 16px; }
.privacidad__enlace a { color: #FFFFFF; text-decoration: none; font-weight: 600; }
.privacidad__enlace a:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 860px) {
  .privacidad__lista { grid-template-columns: minmax(0, 1fr); }
  .privacidad__tarjeta { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; padding: 20px; }
  .privacidad__icono { grid-row: span 2; margin: 0; }
}

/* Preguntas */

.preguntas__interior { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.preguntas__cabeza { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 16px; }
.preguntas__cabeza p { color: var(--texto-2); }
.preguntas__cabeza a { color: var(--texto); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.preguntas__cabeza a:hover { text-decoration: underline; text-underline-offset: 4px; }

.preguntas__lista { border-top: 1px solid var(--borde); }
.pregunta { border-bottom: 1px solid var(--borde); }
.pregunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding-block: 16px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  list-style: none;
  cursor: pointer;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta__icono { flex: none; width: 22px; height: 22px; color: var(--texto-2); transition: rotate 0.35s var(--curva); }
.pregunta__vertical { transform-origin: 12px 12px; transition: transform 0.35s var(--curva), opacity 0.2s var(--suave); }
.pregunta[open] .pregunta__vertical { transform: scaleY(0); opacity: 0; }
.pregunta[open] .pregunta__icono { rotate: 180deg; color: var(--texto); }
.pregunta__respuesta { overflow: hidden; }
.pregunta__respuesta p { padding-bottom: 22px; max-width: 36em; color: var(--texto-2); font-size: 16px; }

@media (max-width: 860px) {
  .preguntas__interior { grid-template-columns: minmax(0, 1fr); }
  .preguntas__cabeza { position: static; }
  .pregunta summary { font-size: 17px; }
}

/* Llamado final */

.final { padding-top: 0; }
.final__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(56px, 8vw, 96px) var(--margen) clamp(88px, 11vw, 136px);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  background: var(--superficie);
  box-shadow: var(--sombra-tarjeta);
}
.aura--final { left: 50%; bottom: 0; width: min(640px, 110%); translate: -50% 60%; scale: 1.7 0.45; --difuso: clamp(44px, 5vw, 72px); --desfase: -6s; }
.final__interior { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
/* El ícono ya trae la forma de Figma (radio 22.37 %, suavizado 0.6), sin trazo ni anillo: lo genera scripts/build-web-iconos.py. */
.final__icono { width: 112px; height: 112px; margin-bottom: 32px; }
.final__icono img { display: block; width: 112px; height: 112px; }
.final__texto { margin: 16px 0 32px; color: var(--texto-2); font-size: clamp(17px, 2vw, 19px); }

/* Pie */

.pie { padding-block: 40px 56px; border-top: 1px solid var(--borde); }
.pie__interior { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 20px 32px; }
.pie__enlaces { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 24px; font-size: 15px; }
.pie__enlaces a { display: inline-flex; align-items: center; min-height: 44px; color: var(--texto-2); text-decoration: none; }
.pie__enlaces a:hover { color: var(--texto); }
.pie__legal { grid-column: 1 / -1; color: var(--texto-2); font-size: 13px; }
.pie__legal + .pie__legal { margin-top: -12px; }
.pie__legal a { color: inherit; }

@media (max-width: 640px) {
  .pie__interior { grid-template-columns: minmax(0, 1fr); }
  .pie__enlaces { justify-content: flex-start; }
}

/* Fuera de pantalla, la luz se detiene. */
.en-pausa .aura,
.en-pausa .aura__luz,
.en-pausa .halo,
.en-pausa .halo__giro { animation-play-state: paused; }

/* Aumentar contraste: anillo nítido con la mitad fuerte del degradado, como en la app. */
@media (prefers-contrast: more) {
  .anillo { filter: none; opacity: 1; background: linear-gradient(135deg, var(--morado), var(--magenta)); }
}
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  .anillo { background: linear-gradient(135deg, var(--rosa), var(--coral)); }
}

/* Reducir movimiento: la luz queda fija, sin anillo, y todo aparece con un fundido corto. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aura, .aura__luz, .halo, .halo__giro { animation: none !important; }
  .aura { opacity: calc((var(--ambiente-minima) + var(--ambiente-maxima)) / 2); }
  .halo { opacity: var(--aura-fija); }
  .anillo { display: none; }
  .js .entrar, .js .iphone--centro, .js .iphone--izquierda, .js .iphone--derecha { animation: aparecer 0.12s ease-out both; }
  .js .revelar { transform: none; transition: opacity 0.12s ease-out; transition-delay: 0s; }
  .iphone--tarjeta, .pregunta__icono, .pregunta__vertical { transition: none; }
  .tarjeta:hover .iphone--tarjeta { transform: none; }
}
@media (prefers-reduced-motion: reduce) and (prefers-contrast: more) {
  .anillo { display: block; }
}