@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("assets/fonts/montserrat.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

/* Blanco frío de estudio; el azul de la carpeta solo en acciones y en la escena del túnel */
:root {
  color-scheme: light;
  --bg: #F3F6FB;
  --surface: #FFFFFF;
  --ink: #0A1226;
  --muted: #4A5670;
  --line: #DCE3EF;
  --blue: #1A5CFF;
  --blue-press: #0F48DB;
  --night: #152390;
  --on-night: #EAF0FF;
  --on-night-muted: #C9D0FA;

  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);
  --gut: max(16px, env(safe-area-inset-left, 0px));
  --gut-r: max(16px, env(safe-area-inset-right, 0px));
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  overflow-x: clip;
}
h1, h2, h3, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }
::selection { background: #C9D8FF; color: var(--ink); }
:focus-visible { outline: 3px solid #7FA4FF; outline-offset: 3px; border-radius: 8px; }
main:focus { outline: none; }

.skip {
  position: fixed; left: 12px; top: 12px; z-index: 50;
  padding: 10px 16px; border-radius: 999px;
  background: var(--ink); color: #fff; text-decoration: none; font-weight: 600;
  transform: translateY(-200%);
}
.skip:focus-visible { transform: none; }

/* ---------- Títulos: apoyo arriba en serif, palabra de peso abajo ---------- */
.title { display: flex; flex-direction: column; align-items: center; text-align: center; }
/* Brutalismo del "Mega": grotesca negra y ancha, segunda línea solo en contorno */
.t-main {
  font-family: var(--sans);
  font-weight: 900;
  font-stretch: 125%;
  text-transform: uppercase;
  font-size: clamp(30px, 8.4vw, 92px);
  line-height: 0.9;
  letter-spacing: -0.03em;
  margin-top: 4px;
  text-wrap: balance;
}
.t-outline {
  color: var(--o-fill, transparent);
  -webkit-text-stroke: 1.6px var(--o-stroke, var(--ink));
  margin-top: 2px;
}
.hero-top .t-main { font-size: clamp(31px, 8.9vw, 100px); }
.hero-top { --o-fill: #F5F7FC; } /* relleno del color del fondo: el contorno se lee aunque pasen recursos por detrás */
/* Títulos de sección: misma grotesca, un poco más angosta para que cada línea quepa entera */
.sec .t-main, .buy .t-main { font-stretch: 110%; font-size: clamp(27px, 7.6vw, 84px); }
.buy .t-main { font-size: clamp(26px, 7.4vw, 44px); }
.sec-blue, .buy { --o-stroke: #FFFFFF; }

/* ---------- Navegación ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  height: calc(60px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) var(--gut-r) 0 var(--gut);
  display: flex; align-items: center; justify-content: space-between;
  pointer-events: none;
}
.nav a { pointer-events: auto; }
.logo {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; font-weight: 750; font-stretch: 108%; font-size: 16px; letter-spacing: -0.01em;
  transition: color 400ms ease;
}
/* Logo de Motion Lab recortado sin fondo: toma el color del texto (oscuro sobre claro, blanco sobre azul) */
.logo { color: var(--ink); min-height: 44px; }
.logo-mark {
  display: block; width: clamp(128px, 34vw, 158px); aspect-ratio: 890 / 121;
  background: currentColor;
  -webkit-mask: url("assets/logo-motionlab.png") center / contain no-repeat;
  mask: url("assets/logo-motionlab.png") center / contain no-repeat;
}
.nav-buy {
  text-decoration: none; font-weight: 650; font-size: 14.5px;
  padding: 10px 16px; border-radius: 999px;
  background: var(--ink); color: #fff;
  transition: transform 160ms var(--ease-out), background-color 300ms ease, color 300ms ease;
}
.nav-buy:active { transform: scale(0.97); }
body.is-night .logo { color: var(--on-night); }
body.is-night .logo { color: #fff; }
body.is-night .nav-buy { background: #fff; color: var(--night); }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%; max-width: 400px; min-height: 56px; padding: 0 28px;
  border-radius: 999px; text-decoration: none;
  font-weight: 700; font-size: 17.5px; letter-spacing: -0.005em;
  color: #fff; background: var(--blue);
  box-shadow: 0 10px 22px -12px rgb(10 20 50 / 0.35);
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.btn:active { transform: scale(0.97); background: var(--blue-press); }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--blue-press); } }
.btn-light { background: #fff; color: var(--night); box-shadow: 0 14px 30px -14px rgb(0 0 0 / 0.5); }
.btn-light:active { background: #E6ECFF; }
@media (hover: hover) and (pointer: fine) { .btn-light:hover { background: #E6ECFF; } }
.btn-big { min-height: 62px; font-size: 19px; }
.btn-small { width: auto; min-height: 46px; font-size: 15.5px; padding: 0 20px; }

.price { display: flex; align-items: baseline; justify-content: center; gap: 10px; font-variant-numeric: tabular-nums; }
.price s { font-family: var(--body); font-weight: 600; font-size: 22px; color: var(--muted); text-decoration-thickness: 2px; }
.price strong { font-family: var(--sans); font-weight: 900; font-stretch: 112%; font-size: 40px; letter-spacing: -0.02em; line-height: 1; }
.price span { font-size: 14px; font-weight: 550; color: var(--muted); }
.price-lg s { font-size: 28px; }
.price-lg strong { font-size: 64px; }
.proof { font-size: 14px; color: var(--muted); text-align: center; }

/* ---------- La escena ---------- */
.exp { position: relative; height: 199vh; }

/* Recursos de la espiral: carpetas oscuras con el mismo estilo de la del pack, solo con el nombre */
.rf.gf { position: absolute; left: 0; top: 0; --w: var(--cw, 100px); will-change: transform, opacity; opacity: 0; }
.gf.dark .b { background: linear-gradient(180deg, #34456E 0%, #1B2648 50%, #0E1632 100%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), inset 0 -12px 22px rgb(0 0 0 / 0.35); }
.gf.dark .b::before { background: linear-gradient(180deg, #45578A, #2C3A63); }
.gf.dark .fr {
  background: linear-gradient(165deg, rgb(98 120 182 / 0.95) 0%, rgb(36 50 96 / 0.97) 50%, rgb(14 22 50 / 0.99) 100%);
  border-color: rgb(255 255 255 / 0.28);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), inset 0 -10px 20px rgb(0 0 0 / 0.3), 0 14px 22px -14px rgb(10 20 60 / 0.55);
}
.gf.dark .fr span { color: #fff; font-size: max(8px, calc(var(--w) * 0.075)); }
.stage {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(60% 45% at 50% 42%, #FFFFFF 0%, rgb(255 255 255 / 0) 70%),
    linear-gradient(180deg, #F6F8FC 0%, #E9EEF7 100%);
  contain: layout paint;
}
/* Túnel con los colores de la segunda versión */
.stage-blue {
  position: absolute; inset: 0; opacity: 0;
  background:
    radial-gradient(40% 40% at 50% 50%, #8C9CFF 0%, rgb(140 156 255 / 0) 70%),
    radial-gradient(120% 110% at 50% 50%, #3A55F2 0%, #2236CF 45%, #152390 100%);
}

/* Referencia invisible: dónde vive el centro de la carpeta en el primer pantallazo */
/* Puntos de anclaje del scroll: el primer pantallazo y la compra en el túnel */

/* ---------- Carpeta de vidrio (la del pack) ---------- */
.f-back, .f-front, .f-shadow { position: absolute; left: 0; top: 0; will-change: transform; transform-origin: 0 0; opacity: 0; } /* ocultas hasta que app.js las ubica: así no aparecen un instante en la esquina */
.f-back, .f-front { touch-action: pan-y; cursor: grab; } /* se arrastra en horizontal para atrapar las carpetas; deslizar en vertical sobre ella sigue haciendo scroll */
.f-back:active, .f-front:active { cursor: grabbing; }
.f-back {
  z-index: 2;
  width: 200px; height: 136px; border-radius: 16px;
  background: linear-gradient(180deg, #5AA2FF 0%, #2A6BFF 45%, #1550F0 100%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.55),
    inset 0 -18px 30px rgb(0 24 110 / 0.35),
    0 24px 40px -18px rgb(20 70 230 / 0.55);
}
.f-back::before {
  content: ""; position: absolute; left: 0; top: -15px;
  width: 42%; height: 30px; border-radius: 14px 18px 0 0;
  background: linear-gradient(180deg, #6AACFF, #4C93FF);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55);
  clip-path: polygon(0 0, 78% 0, 100% 52%, 100% 100%, 0 100%);
}
.f-front {
  z-index: 4;
  width: 204px; height: 112px; border-radius: 16px;
  display: flex; align-items: flex-end; padding: 0 0 14px 16px;
  background: linear-gradient(165deg, rgb(150 205 255 / 0.62) 0%, rgb(56 128 255 / 0.62) 45%, rgb(18 82 238 / 0.78) 100%);
  border: 1px solid rgb(255 255 255 / 0.5);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.85),
    inset 0 -14px 26px rgb(0 30 120 / 0.28),
    0 18px 30px -16px rgb(10 50 190 / 0.55);
  -webkit-backdrop-filter: blur(9px) saturate(150%);
  backdrop-filter: blur(9px) saturate(150%);
  overflow: hidden;
}
.f-front::after {
  content: ""; position: absolute; inset: -40% -10%;
  background: linear-gradient(115deg, rgb(255 255 255 / 0) 38%, rgb(255 255 255 / 0.38) 47%, rgb(255 255 255 / 0) 58%);
  pointer-events: none;
}
.f-front span {
  font-weight: 800; font-stretch: 115%; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgb(255 255 255 / 0.9);
  text-shadow: 0 1px 0 rgb(0 30 120 / 0.35);
}
.f-shadow {
  z-index: 1;
  width: 240px; height: 40px; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(10 40 140 / 0.28), rgb(10 40 140 / 0));
}

/* ---------- Cinta de recursos ---------- */
.ribbon { position: absolute; inset: 0; z-index: 3; pointer-events: none; }

/* ---------- Texto de la escena ---------- */
/* Primer pantallazo: título arriba, espiral y carpeta al centro, texto y compra abajo (nada encima del texto) */
.hero-top {
  position: absolute; z-index: 6; left: 0; right: 0;
  top: calc(72px + env(safe-area-inset-top, 0px));
  padding: 0 var(--gut-r) 0 var(--gut);
  will-change: opacity, transform;
}
.hero-bottom {
  position: absolute; z-index: 6; left: 0; right: 0;
  bottom: calc(86px + env(safe-area-inset-bottom, 0px)); /* deja libre la barra de compra fija */
  padding: 0 var(--gut-r) 0 var(--gut);
  display: grid; justify-items: center; gap: 12px;
  will-change: opacity, transform;
}
.lead { max-width: 36ch; text-align: center; color: var(--ink); font-size: 15.5px; font-weight: 500; line-height: 1.45; text-wrap: balance; }
.hero-offer { display: grid; justify-items: center; gap: 10px; width: 100%; }
.hero-bottom .proof { font-size: 13px; }

.buy .t-main:not(.t-outline) { color: #fff; }

/* ---------- Túnel de carpetas (colores de la segunda versión) ---------- */
.tube-wrap {
  position: absolute; inset: 0; z-index: 1;
  perspective: 900px; perspective-origin: 50% 50%;
  opacity: 0; pointer-events: none;
}
.tube { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; will-change: transform; }
/* Carpeta de vidrio reutilizable: misma forma y color que la carpeta del pack (túnel y "Todo lo que recibes") */
.gf i { font-style: normal; } /* las etiquetas van en la misma grotesca recta de los títulos */
.gf { position: relative; width: var(--w, 120px); height: calc(var(--w, 120px) * 0.72); }
.gf .b {
  position: absolute; left: 0; right: 0; bottom: 0; height: 94.4%;
  border-radius: calc(var(--w, 120px) * 0.08);
  background: linear-gradient(180deg, #5AA2FF 0%, #2A6BFF 45%, #1550F0 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.55), inset 0 -12px 22px rgb(0 24 110 / 0.35);
}
.gf .b::before {
  content: ""; position: absolute; left: 0; top: -10.5%;
  width: 42%; height: 22%; border-radius: calc(var(--w, 120px) * 0.07) calc(var(--w, 120px) * 0.09) 0 0;
  background: linear-gradient(180deg, #6AACFF, #4C93FF);
  clip-path: polygon(0 0, 78% 0, 100% 52%, 100% 100%, 0 100%);
}
.gf .fr {
  position: absolute; left: -1%; right: -1%; bottom: 0; height: 77.8%;
  border-radius: calc(var(--w, 120px) * 0.08);
  display: flex; align-items: flex-end;
  padding: 0 7% 9%;
  background: linear-gradient(165deg, rgb(150 205 255 / 0.9) 0%, rgb(56 128 255 / 0.92) 45%, rgb(18 82 238 / 0.96) 100%);
  border: 1px solid rgb(255 255 255 / 0.5);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.85), inset 0 -10px 20px rgb(0 30 120 / 0.28);
  overflow: hidden;
}
.gf .fr::after {
  content: ""; position: absolute; inset: -40% -10%;
  background: linear-gradient(115deg, rgb(255 255 255 / 0) 38%, rgb(255 255 255 / 0.3) 47%, rgb(255 255 255 / 0) 58%);
}
.gf .fr span {
  position: relative; z-index: 1;
  font-family: var(--sans); font-weight: 900; font-stretch: 112%;
  font-size: max(8px, calc(var(--w, 120px) * 0.07)); letter-spacing: 0.04em; line-height: 1.25; text-transform: uppercase;
  color: rgb(255 255 255 / 0.92);
}
.tf { position: absolute; left: 0; top: 0; --w: var(--tw, 120px); backface-visibility: hidden; }
.tf.is-pack { opacity: 0; }

/* ---------- Compra al centro del túnel ---------- */
.buy {
  position: absolute; z-index: 7; left: 50%; top: 50%;
  width: min(440px, calc(100% - 32px));
  transform: translate(-50%, -50%);
  padding: 30px 22px 24px; border-radius: 28px;
  display: grid; justify-items: center; gap: 16px;
  background: rgb(14 22 110 / 0.5);
  border: 1px solid rgb(255 255 255 / 0.18);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  color: var(--on-night);
  opacity: 0; visibility: hidden;
  will-change: opacity, transform;
}
.buy .t-main { font-size: clamp(26px, 7.4vw, 44px); }
.buy .price-lg strong { font-size: clamp(44px, 13vw, 64px); }
.buy .price { flex-wrap: wrap; row-gap: 2px; }
.buy .price s, .buy .price span { color: var(--on-night-muted); }
.buy .price strong { color: #fff; }
.trust { display: grid; gap: 8px; width: 100%; max-width: 320px; }
.trust li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--on-night); }
.trust svg { flex: none; width: 20px; height: 20px; fill: none; stroke: #C9D0FA; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.note { font-size: 13px; color: var(--on-night-muted); text-align: center; }

/* ---------- Secciones ---------- */
.sec {
  content-visibility: auto; contain-intrinsic-size: auto 900px; /* las secciones de abajo no se pintan hasta que se acercan */
  padding-block: 104px;
  padding-left: var(--gut); padding-right: var(--gut-r);
  display: flex; flex-direction: column; align-items: center; gap: 40px;
}
.sec-blue { background: var(--night); color: var(--on-night); padding-top: 72px; }
.sec-blue .t-main { color: #fff; }

.sec-lead { margin-top: -20px; text-align: center; color: var(--on-night-muted); font-family: var(--sans); font-weight: 900; font-stretch: 110%; text-transform: uppercase; font-size: clamp(15px, 4.2vw, 22px); letter-spacing: 0.01em; line-height: 1.2; text-wrap: balance; }

/* Las 13 carpetas: suben con pop y opacidad cuando el scroll llega a ellas */
.cats { width: 100%; max-width: 860px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 14px; padding-top: 14px; }
.cats li { display: grid; justify-items: center; }
.cats .gf { --w: 150px; transition: transform 220ms var(--ease-out); }
.cats li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.cats li:active .gf { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .cats li:hover .gf { transform: translateY(-4px); } }
.js-pop .cats li { opacity: 0; transform: translateY(34px) scale(0.92); }
.js-pop .cats li.is-in {
  opacity: 1; transform: none;
  transition: opacity 420ms ease, transform 620ms cubic-bezier(0.34, 1.56, 0.64, 1);
  transition-delay: var(--d, 0ms);
}

/* Lo que ganas: solo los títulos, en la grotesca de la página, separados por líneas */
.gains { width: 100%; max-width: 900px; border-top: 2px solid var(--ink); }
.gains li {
  padding: 22px 0; border-bottom: 2px solid var(--ink);
  font-family: var(--sans); font-weight: 900; font-stretch: 112%; text-transform: uppercase;
  font-size: clamp(18px, 4.6vw, 30px); line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance;
}

.g-help { color: var(--muted); text-align: center; max-width: 40ch; margin-top: -16px; }

/* Instagram: botón llamativo con los colores de la marca de Instagram */
.sec-help { background: var(--surface); border-block: 1px solid var(--line); }
.ig {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 14px 26px 14px 18px; border-radius: 999px;
  min-height: 64px; text-decoration: none; color: #fff;
  background: linear-gradient(100deg, #F58529 0%, #DD2A7B 45%, #8134AF 75%, #515BD4 100%);
  box-shadow: 0 16px 30px -16px rgb(129 52 175 / 0.6);
  transition: transform 160ms var(--ease-out);
}
.ig:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .ig:hover { transform: translateY(-2px); } }
.ig svg { width: 30px; height: 30px; flex: none; fill: none; stroke: #fff; stroke-width: 1.8; }
.ig svg .dot { fill: #fff; stroke: none; }
.ig span { display: grid; line-height: 1.2; text-align: left; }
.ig strong { font-size: 17px; font-weight: 700; }
.ig small { font-size: 14px; opacity: 0.9; }
/* Sellos de confianza: cada uno en su cuadrito, en columna pareja en celular y en fila en computador */
.pills { display: grid; gap: 10px; width: 100%; max-width: 320px; }
.pills li {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-radius: 14px;
  background: var(--bg); border: 1px solid var(--line);
  font-size: 14.5px; font-weight: 600; color: var(--ink);
}
.pills svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.g-help a, .foot a { text-underline-offset: 3px; text-decoration-thickness: 1px; }

.faq { width: 100%; max-width: 760px; display: grid; gap: 10px; }
.faq details { border-radius: 16px; background: var(--surface); border: 1px solid var(--line); transform-origin: 50% 50%; }
.faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 18px 54px 18px 20px; font-weight: 700; font-size: 16px; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 22px; top: 50%;
  width: 9px; height: 9px;
  border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 220ms var(--ease-out);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details p { padding: 0 20px 20px; color: var(--muted); }

.sec-final { gap: 20px; padding-bottom: 120px; }
.sec-final .title { margin-bottom: 8px; }
.sec-final .t-main { font-size: clamp(19px, 6.6vw, 76px); }
.t-one { white-space: nowrap; text-wrap: nowrap; }
.sec-final .pills { margin-top: 12px; }
.sec-final .pills li { background: var(--surface); }

.foot {
  padding: 56px var(--gut-r) calc(120px + env(safe-area-inset-bottom, 0px)) var(--gut);
  text-align: center; color: var(--muted); font-size: 14px;
  display: grid; gap: 8px; justify-items: center;
  border-top: 1px solid var(--line);
}
.legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-bottom: 10px; }
.legal-links a { color: var(--ink); font-weight: 600; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.foot .disclaimer { font-size: 12.5px; max-width: 46ch; opacity: 0.85; }

/* ---------- Barra de compra fija (celular) ---------- */
.buybar {
  position: fixed; z-index: 40;
  left: max(12px, env(safe-area-inset-left, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 8px 8px 18px; border-radius: 999px;
  background: var(--ink); color: #fff;
  box-shadow: 0 18px 40px -18px rgb(0 0 0 / 0.6);
  transform: translateY(calc(100% + 24px)); opacity: 0;
  transition: transform 320ms var(--ease-out), opacity 200ms ease;
}
.buybar, .buybar.is-on { transform: translateY(0); opacity: 1; } /* compra siempre a la vista, siguiendo el scroll */
.hero-offer .btn { display: none; } /* el botón del primer pantallazo es la barra fija */
.buybar p { display: flex; align-items: baseline; gap: 12px; line-height: 1.2; white-space: nowrap; } /* Mega Pack a la izquierda y el precio al lado */
.buybar strong { font-size: 16px; font-weight: 760; }
.buybar span { font-size: 15px; font-weight: 600; }
.buybar s { opacity: 0.6; margin-right: 4px; }

body.paused *, body.paused *::before, body.paused *::after { animation-play-state: paused !important; }

/* Equipos lentos (app.js agrega .lite): sin desenfoque de vidrio, mismo color con más cuerpo */
.lite .buy, .lite .f-front { -webkit-backdrop-filter: none; backdrop-filter: none; }
.lite .buy { background: rgb(14 22 110 / 0.88); }
.lite .f-front { background: linear-gradient(165deg, rgb(150 205 255) 0%, rgb(56 128 255) 45%, rgb(18 82 238) 100%); }

/* ---------- Computador ---------- */
@media (min-width: 900px) {
  .exp { height: 204vh; }
  /* Computador: todo centrado, como en el diseño anterior */
  .hero-top { top: calc(78px + env(safe-area-inset-top, 0px)); }
  .hero-top .t-main { font-size: clamp(44px, 7.6vw, 120px); }
  .hero-bottom { gap: 10px; }
  .lead { font-size: 17px; max-width: 60ch; }
  .hero-offer { grid-template-columns: auto auto; align-items: center; column-gap: 22px; justify-content: center; }
  .hero-offer .btn { width: auto; min-width: 220px; }
  .buy { padding: 40px 36px 30px; }
  .sec { padding-block: 150px; }
  .cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 36px 28px; }
  .cats li { width: 180px; }
  .cats .gf { --w: 180px; }
  .gains article { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); gap: 40px; align-items: baseline; padding: 34px 0; }
  .pills { display: flex; flex-wrap: wrap; justify-content: center; max-width: 760px; }
  .buybar { left: 0; right: 0; margin-inline: auto; width: min(520px, calc(100% - 32px)); }
}
/* Celulares muy angostos (iPhone SE de 320 px): la barra de compra cabe completa */
@media (max-width: 359px) {
  .buybar { padding-left: 14px; gap: 8px; }
  .buybar p { gap: 8px; }
  .buybar s { display: none; }
  .btn-small { padding: 0 16px; }
}
/* Celular en horizontal (pantallas bajas): título más chico y cuadro de compra compacto para que quepa entero */
@media (max-height: 500px) {
  .hero-top .t-main { font-size: clamp(22px, 5vw, 46px); }
  .buy { top: 46%; padding: 16px 20px; gap: 10px; }
  .buy .t-main { font-size: clamp(18px, 4.6vh, 26px); }
  .buy .price-lg strong { font-size: 40px; }
  .buy .price-lg s { font-size: 20px; }
  .buy .trust, .buy .note { display: none; }
}
@media (max-height: 640px) and (max-width: 899px) {
  .lead { display: none; }
  .hero-bottom .proof { display: none; }
}