/* Honolia · estilos del sitio
   Identidad: tinta, índigo, amarillo. Fraunces 700 para títulos, Manrope para el resto. */

/* ---------- Colores y medidas ---------- */
:root {
  --ink: #272735; --indigo: #4B4ACF; --indigo-soft: #ECECFB; --bg: #F6F6F8; --surface: #FFFFFF;
  --muted: #5A5B68; --green: #1E7A4C; --green-soft: #E3F2E8; --amber: #A35A00; --amber-soft: #FFF1DB; --yellow: #C9C8F7; --page: #F6F6F8; --alt: #FFFFFF; --soft: #EFEFF3;
  --line: #E4E4EA; --stroke: #272735; --band: #171721; --band-text: #F3F4F6; --band-muted: #A9AFBD;
  --cta: #4B4ACF; --cta-text: #FFFFFF; --link: #4B4ACF;
  --display: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --logo: 'League Spartan', 'Century Gothic', system-ui, sans-serif;
  --body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --r-card: 28px; --r-ctl: 14px; --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #EDEDF3; --indigo: #9C9BF5; --indigo-soft: #24244A; --bg: #171721; --surface: #1E1E2A;
    --muted: #C3C3CC; --green: #7AD6A4; --green-soft: #16301F; --amber: #F2B25C; --amber-soft: #38290F;
    --line: rgba(243, 244, 246, .14); --stroke: #F3F4F6; --band: #1A1A3B; --cta: #5E5DE0; --link: #A9A8FF; --page: #171721; --alt: #1B1B25;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink: #EDEDF3; --indigo: #9C9BF5; --indigo-soft: #24244A; --bg: #171721; --surface: #1E1E2A;
  --muted: #C3C3CC; --green: #7AD6A4; --green-soft: #16301F; --amber: #F2B25C; --amber-soft: #38290F;
  --line: rgba(243, 244, 246, .14); --stroke: #F3F4F6; --band: #1A1A3B; --cta: #5E5DE0; --link: #A9A8FF; --page: #171721; --alt: #1B1B25;
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 500 1.0625rem/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; border-radius: 6px; }
h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: -.035em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 5.3vw, 4.7rem); line-height: 1.02; }
h2 { font-size: clamp(2.1rem, 4.3vw, 3.5rem); line-height: 1.05; }
h3 { font-size: 1.25rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.25; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.5; color: var(--muted); max-width: 34em; text-wrap: pretty; }
.muted { color: var(--muted); }
.wrap { width: min(100% - clamp(40px, 9vw, 96px), 1160px); margin-inline: auto; }
.section { padding-block: clamp(80px, 11vw, 144px); }
.section-head { display: grid; gap: 20px; margin-bottom: clamp(40px, 6vw, 72px); max-width: 780px; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 100; background: var(--ink); color: var(--bg); padding: 12px 18px; border-radius: 12px; }
.skip:focus { top: 16px; }
.link { color: var(--link); font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.link.on-dark { color: var(--yellow); }

/* ---------- Botones ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 14px 28px; white-space: nowrap; border-radius: 999px; border: 2px solid transparent; font-weight: 700; font-size: 1.0625rem; letter-spacing: -.01em; text-decoration: none; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--cta); color: var(--cta-text); box-shadow: 0 12px 28px -14px color-mix(in srgb, var(--cta) 90%, transparent); }
.btn-primary:hover { box-shadow: 0 18px 34px -14px color-mix(in srgb, var(--cta) 90%, transparent); }
.btn-ghost { border-color: var(--stroke); color: var(--ink); }
.btn-ghost:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.btn-ink { background: #fff; color: #272735; box-shadow: 0 14px 34px -14px rgba(255, 255, 255, .55); }
.btn-ghost.on-yellow { border-color: rgba(255, 255, 255, .55); color: #fff; } .btn-ghost.on-yellow:hover { background: rgba(255, 255, 255, .1); }
.btn-sm { min-height: 42px; padding: 8px 18px; font-size: .95rem; box-shadow: none; }
.btn-sm:hover { box-shadow: none; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; }
.cta-note { font-size: .95rem; color: var(--muted); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 42px; height: 42px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; font-weight: 700; font-size: .85rem; }
.icon-btn:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--ink); color: var(--page); font: 700 1.4rem/1 var(--logo); padding-top: 4px; }
.logo-word { font: 700 1.7rem/1 var(--logo); letter-spacing: -.055em; padding-top: 5px; }

/* ---------- Navegación flotante ---------- */
.nav { position: sticky; top: 12px; z-index: 50; display: flex; align-items: center; gap: 8px; width: min(100% - 24px, 1120px); margin: 12px auto 0; padding: 8px 8px 8px 18px; border: 1px solid var(--line); border-radius: 999px; background: color-mix(in srgb, var(--surface) 82%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); }
.nav-links { display: flex; gap: 4px; margin-inline: auto; }
.nav-links a { padding: 9px 14px; border-radius: 999px; font-size: .95rem; font-weight: 700; text-decoration: none; }
.nav-links a:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.nav-tools { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav-tools .btn { margin-left: 6px; }
.nav-burger { display: none; }
.i-moon { display: none; }
:root[data-theme="dark"] .i-sun { display: none; } :root[data-theme="dark"] .i-moon { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .i-sun { display: none; } :root:not([data-theme="light"]) .i-moon { display: block; } }
.flag { border-radius: 3px; box-shadow: 0 0 0 1px var(--line); flex: none; }
.lang { position: relative; }
.lang-menu { position: absolute; right: 0; top: calc(100% + 12px); width: 264px; padding: 8px; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); box-shadow: 0 24px 48px -16px rgba(15, 17, 21, .28); }
.lang-menu button { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 12px; background: none; font-size: .95rem; font-weight: 600; text-align: left; }
.lang-menu button:hover:not(:disabled), .lang-menu button[aria-selected="true"] { background: var(--indigo-soft); }
.lang-menu button:disabled { color: var(--muted); cursor: default; }
.lang-menu em { margin-left: auto; font-style: normal; font-size: .75rem; padding: 2px 8px; border-radius: 999px; background: var(--bg); }
@media (max-width: 900px) {
  .nav { flex-wrap: wrap; border-radius: 28px; padding-left: 14px; }
  .nav-burger { display: inline-flex; }
  .nav-links { display: none; order: 3; flex-direction: column; width: 100%; padding: 8px 0 6px; }
  .nav.is-open .nav-links { display: flex; }
  .nav-links a { font-size: 1.1rem; padding: 12px 14px; }
  .lang-btn [data-lang-code] { display: none; }
}
@media (max-width: 420px) { .logo-word { font-size: 1.3rem; } .logo { gap: 7px; } .nav { gap: 2px; padding-left: 12px; } .nav .icon-btn { min-width: 34px; padding: 0 6px; } .nav-tools .btn { padding-inline: 14px; } .nav [data-theme-toggle] { display: none; } }

/* ---------- Portada ---------- */
.hero { padding-block: clamp(40px, 7vw, 96px) clamp(64px, 8vw, 112px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-copy { display: grid; gap: 28px; justify-items: start; }
.hero-visual { --px: 0; --py: 0; position: relative; display: grid; place-items: center; min-height: 620px; }
.blob { position: absolute; width: min(118%, 600px); fill: var(--indigo-soft); animation: drift 22s ease-in-out infinite alternate; }

.phone { --pw: 292px; position: relative; z-index: 1; width: var(--pw); height: calc((var(--pw) - 22px) * 2 + 56px); padding: 11px; border-radius: 48px; background: linear-gradient(145deg, #5a5e6b 0%, #17181d 18%, #0b0c10 50%, #24262d 82%, #6a6e7b 100%); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28), inset 0 0 0 5px #0b0c10, 0 0 0 1px rgba(0, 0, 0, .5), 0 2px 4px rgba(15, 17, 21, .3), 0 50px 80px -30px rgba(15, 17, 21, .6), 0 90px 120px -60px rgba(75, 74, 207, .45); transform: perspective(1400px) rotateY(calc(var(--px, 0) * -16deg)) rotateX(calc(var(--py, 0) * 12deg + var(--s, 0) * 22deg)) translateY(calc(var(--s, 0) * -24px)); transition: transform .35s var(--ease); will-change: transform; }
.phone::before { content: ''; position: absolute; z-index: 5; top: 21px; left: 50%; width: 86px; height: 24px; border-radius: 999px; background: radial-gradient(circle at 78% 50%, #23305a 0 3px, #05060a 4px) #05060a; transform: translateX(-50%); }
.phone::after { content: ''; position: absolute; right: -3px; top: 27%; width: 3px; height: 13%; border-radius: 2px; background: linear-gradient(90deg, #17181d, #5a5e6b); box-shadow: calc(-1 * var(--pw) - 3px) -40px 0 0 #3a3d47, calc(-1 * var(--pw) - 3px) 44px 0 0 #3a3d47; }
.phone-screen::after { content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; background: linear-gradient(118deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .04) 22%, transparent 34%); }
.phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 36px; background: var(--bg); display: flex; flex-direction: column; }
.shot-img { width: 100%; height: 100%; object-fit: cover; }

/* Pantalla ilustrada de la app */
.app { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 54px 12px 10px; font-size: 12px; line-height: 1.3; color: var(--ink); }
.app b { font-weight: 800; } .app small { display: block; color: var(--muted); font-size: 10.5px; } .app em { font-style: normal; font-weight: 800; margin-left: auto; white-space: nowrap; }
.app-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; padding: 0 4px 2px; }
.app-head b { font: 400 20px/1.1 var(--display); letter-spacing: -.02em; }
.app-head .av + b { margin-right: auto; }
.app-total { display: grid; gap: 2px; padding: 14px; border-radius: 18px; background: var(--indigo-soft); }
.app-total span { font-size: 10.5px; font-weight: 700; color: var(--indigo); }
.app-total strong { font: 400 27px/1.1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.app-total.amber { background: var(--amber-soft); } .app-total.amber span { color: var(--amber); }
.app-row { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 14px; background: var(--surface); }
.app-row.group { box-shadow: 0 0 0 1.5px var(--indigo) inset; }
.app-row time { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--muted); width: 36px; }
.app-row > div { min-width: 0; margin-right: auto; }
.av { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 999px; font-size: 9.5px; font-weight: 800; color: #272735; }
.a1 { background: #DCE7F5; } .a2 { background: #C9C8F7; } .a3 { background: #BFE5CE; } .a4 { background: #4B4ACF; color: #fff; } .a5 { background: #FFD9A1; } .a6 { background: #272735; color: #fff; }
.pill { flex: none; padding: 3px 8px; border-radius: 999px; font-size: 9.5px; font-weight: 800; background: var(--bg); color: var(--muted); }
.pill.green { background: var(--green-soft); color: var(--green); } .pill.amber { background: var(--amber-soft); color: var(--amber); } .pill.indigo { background: var(--indigo-soft); color: var(--indigo); }
.t-amber { color: var(--amber); } .t-green { color: var(--green); }
.app-note { padding: 9px 10px; border-radius: 14px; background: var(--amber-soft); color: var(--amber); font-weight: 700; font-size: 10.5px; }
.app-card { display: grid; gap: 6px; padding: 12px; border-radius: 16px; background: var(--surface); }
.app-card.dashed { background: none; border: 1.5px dashed var(--muted); }
.app-card-top, .app-card-foot { display: flex; align-items: center; gap: 8px; }
.app-chart { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding: 14px; border-radius: 18px; background: var(--surface); }
.app-chart i { flex: 1; height: var(--h); border-radius: 6px 6px 2px 2px; background: var(--indigo-soft); transform-origin: bottom; }
.app-chart i.now { background: var(--indigo); }
.screen.is-on .app-chart i { animation: grow .7s var(--ease) both; }
.app-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.app-stats div { padding: 10px 12px; border-radius: 14px; background: var(--surface); }
.app-stats strong { display: block; font: 400 22px/1.1 var(--display); } .app-stats span { font-size: 10.5px; color: var(--muted); font-weight: 700; }
.app-bubble { align-self: flex-end; max-width: 88%; margin-top: 8px; padding: 10px 12px; border-radius: 16px 16px 4px 16px; background: var(--green-soft); color: var(--ink); font-weight: 600; }
.app-btn { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: auto; padding: 11px; border-radius: 999px; background: #1E7A4C; color: #fff; font-weight: 800; }
.file { flex: none; display: grid; place-items: center; width: 34px; height: 40px; border-radius: 8px; font-size: 9px; font-weight: 800; color: #fff; }
.file.xls { background: #1E7A4C; } .file.pdf { background: #272735; }
:root[data-theme="dark"] .file.pdf { background: #4B4ACF; }
.app-tabs { display: flex; justify-content: space-between; padding: 9px 10px 16px; background: var(--surface); border-top: 1px solid var(--line); font-size: 8px; font-weight: 700; color: var(--muted); }
.app-tabs span { display: grid; justify-items: center; gap: 4px; flex: 1; }
.app-tabs span::before { content: ''; width: 16px; height: 16px; border-radius: 6px; background: var(--line); }
.app-tabs .on { color: var(--indigo); } .app-tabs .on::before { background: var(--indigo); }

/* Tarjetas flotantes */
.float { position: absolute; z-index: 2; translate: calc(var(--px, 0) * var(--d) * 34px + var(--s, 0) * var(--sx, 0px)) calc(var(--py, 0) * var(--d) * 34px + var(--s, 0) * var(--sy, 0px)); transition: translate .35s var(--ease); }
.float-in { display: flex; align-items: center; gap: 12px; padding: 12px 16px 12px 12px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 18px 36px -18px rgba(15, 17, 21, .35); font-size: .9rem; line-height: 1.3; white-space: nowrap; animation: bob 6s ease-in-out infinite; }
.float b { display: block; font-weight: 800; } .float small { color: var(--muted); font-size: .82rem; }
.dot { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; }
.dot svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.dot.green { background: var(--green-soft); color: var(--green); } .dot.yellow { background: var(--yellow); color: #272735; } .dot.indigo { background: var(--indigo-soft); color: var(--indigo); } .dot.amber { background: var(--amber-soft); color: var(--amber); }
.f1 { top: 3%; left: -12%; rotate: -3deg; } .f2 { top: 36%; right: -14%; rotate: 2.5deg; } .f3 { bottom: 22%; left: -14%; rotate: 2deg; } .f4 { bottom: 4%; right: -8%; rotate: -2deg; }
.f2 .float-in { animation-delay: -2s; } .f3 .float-in { animation-delay: -3.5s; } .f4 .float-in { animation-delay: -1s; }

/* Entrada de la portada (una sola secuencia) */
.js .hero-copy > *, .js .hero .phone, .js .hero .blob, .js .hero .float { opacity: 0; }
.js.ready .hero-copy > * { animation: rise .8s var(--ease) both; }
.js.ready .hero-copy > :nth-child(2) { animation-delay: .1s; } .js.ready .hero-copy > :nth-child(3) { animation-delay: .2s; } .js.ready .hero-copy > :nth-child(4) { animation-delay: .28s; }
.js.ready .hero .blob { animation: pop .9s var(--ease) .15s both, drift 22s ease-in-out 1s infinite alternate; }
.js.ready .hero .phone { animation: phoneIn 1.2s var(--ease) .3s both; }
@keyframes phoneIn { from { opacity: 0; scale: .8; rotate: 8deg; translate: 0 60px; } to { opacity: 1; scale: 1; rotate: 0deg; translate: 0 0; } }
.js.ready .hero .float { animation: pop .6s var(--ease) both; animation-delay: .9s; }
.js.ready .hero .f2 { animation-delay: 1.1s; } .js.ready .hero .f3 { animation-delay: 1.3s; } .js.ready .hero .f4 { animation-delay: 1.5s; }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes pop { from { opacity: 0; scale: .8; } to { opacity: 1; scale: 1; } }
@keyframes bob { 50% { transform: translateY(-9px); } }
@keyframes drift { to { transform: rotate(14deg) scale(1.04); } }
@keyframes grow { from { transform: scaleY(0); } }

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { min-height: 600px; margin-top: 8px; }
  .f1 { left: 0; } .f2 { right: 0; } .f3 { left: 0; } .f4 { right: 0; }
}
@media (max-width: 560px) {
  .btn { width: 100%; } .btn-sm { width: auto; }
  .hero-visual { min-height: 560px; }
  .phone { --pw: 250px; border-radius: 42px; } .phone-screen { border-radius: 32px; }
  .float-in { padding: 9px 12px 9px 9px; font-size: .8rem; gap: 9px; } .dot { width: 32px; height: 32px; }
  .f1 { top: 1%; left: -8px; } .f4 { bottom: 0; right: -8px; } .f2, .f3 { display: none; }
}

/* ---------- El problema ---------- */
.problem { background: var(--alt); }
.problem .section-head { margin-bottom: 28px; }
.scrub { font: 400 clamp(1.5rem, 3.1vw, 2.5rem)/1.25 var(--display); letter-spacing: -.015em; max-width: 24em; margin-bottom: clamp(48px, 7vw, 96px); text-wrap: pretty; }
.js .scrub .sw { opacity: .16; transition: opacity .4s; } .js .scrub .sw.lit { opacity: 1; }
/* Del desorden al orden: los papeles sueltos se juntan en una sola pantalla al hacer scroll */
.chaos { --q: clamp(0, (var(--p, 1) - .38) / .22, 1); --k: 1; position: relative; height: 500px; display: grid; place-items: center; margin-bottom: clamp(40px, 6vw, 72px); }
.scrap { position: absolute; left: 50%; top: 50%; color: #272735; font-size: 14px; line-height: 1.35; box-shadow: 0 18px 40px -22px rgba(15, 17, 21, .45), 0 0 0 1px rgba(15, 17, 21, .08); translate: calc(-50% + var(--x) * var(--k) * (1 - var(--q))) calc(-50% + var(--y) * var(--k) * (1 - var(--q))); rotate: calc(var(--r) * (1 - var(--q))); scale: calc(1 - var(--q) * .5); opacity: calc((1 - var(--q)) * 3); will-change: translate, opacity; }
.s-note { display: grid; gap: 0; width: 230px; padding: 16px 18px 14px 34px; border-radius: 6px; background: repeating-linear-gradient(#FFFEF9 0 27px, #C9D4EA 27px 28px); font: 400 19px/28px var(--display); border-left: 0; }
.s-note::before { content: ''; position: absolute; left: 22px; top: 0; bottom: 0; width: 1px; background: #E6A0A0; }
.s-sheet { display: grid; grid-template-columns: 1.4fr .6fr 1fr; width: 250px; border-radius: 8px; overflow: hidden; background: #fff; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.s-sheet > * { padding: 7px 10px; border-right: 1px solid #E3E5EA; border-bottom: 1px solid #E3E5EA; } .s-sheet b { background: #1E7A4C; color: #fff; font-weight: 600; border-color: #1E7A4C; }
.s-sheet .err { background: #FFF1DB; color: #A35A00; font-weight: 700; }
.s-chat { max-width: 240px; padding: 12px 16px; border-radius: 18px 18px 18px 4px; background: #E3F2E8; font-weight: 500; }
.s-pay { display: grid; gap: 2px; padding: 14px 18px; border-radius: 16px; background: #fff; } .s-pay b { font-weight: 700; } .s-pay small { font-size: 13px; color: #5A5B68; }
.s-sticky { width: 150px; padding: 18px 16px 22px; background: #D9D8FB; font: 400 22px/1.15 var(--display); box-shadow: 0 16px 30px -18px rgba(15, 17, 21, .5); }
.tidy { position: relative; z-index: 2; width: min(100%, 340px); min-height: 0; padding: 20px; border-radius: 26px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 50px 90px -40px color-mix(in srgb, var(--indigo) 75%, transparent); opacity: calc((var(--q) - .45) * 2.4); scale: calc(.84 + var(--q) * .16); }
.tidy .app-head b { font: 400 26px/1.1 var(--display); } .tidy .app-total strong { font-size: 40px; } .tidy .app-row { background: var(--bg); box-shadow: none; }
.tidy .dot { width: 26px; height: 26px; border-radius: 50%; } .tidy .dot svg { width: 14px; height: 14px; }
.fixes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); }
.fix { display: grid; gap: 10px; align-content: start; padding-top: 22px; border-top: 1px solid var(--line); }
.fix h3 { font: 400 clamp(1.7rem, 2.6vw, 2.2rem)/1.05 var(--display); color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.fix > p { color: var(--muted); font-size: .98rem; }
.fix-new { display: flex; gap: 12px; align-items: flex-start; margin-top: 8px; }
.fix-new .dot { width: 28px; height: 28px; border-radius: 50%; } .fix-new .dot svg { width: 15px; height: 15px; }
.fix-new b { display: block; font-size: 1.1rem; letter-spacing: -.01em; } .fix-new small { display: block; font-size: .98rem; color: var(--muted); }
.js .fix:nth-child(2)[data-reveal] { transition-delay: .12s; } .js .fix:nth-child(3)[data-reveal] { transition-delay: .24s; }
@media (max-width: 1000px) { .chaos { --k: .72; } }
@media (max-width: 760px) { .chaos { --k: .4; height: 520px; } .scrap { zoom: .78; } .s-note { --y: -210px !important; } .s-sheet { --y: -330px !important; --x: 120px !important; } .s-chat { --y: 330px !important; } .s-pay { --y: 260px !important; } .s-sticky { --y: -520px !important; --x: -160px !important; } .fixes { grid-template-columns: 1fr; } }

/* ---------- Cómo funciona ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step { display: grid; gap: 10px; align-content: start; padding: 16px 16px 30px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); }
.step > :not(.mini) { margin-inline: 12px; }
.step h3 { font: 400 clamp(1.7rem, 2.4vw, 2.1rem)/1.1 var(--display); letter-spacing: -.01em; }
.step p { color: var(--muted); }
.step-n { justify-self: start; margin-top: 14px; padding: 4px 12px; border-radius: 999px; background: var(--indigo-soft); color: var(--indigo); font-size: .85rem; font-weight: 700; }
.mini { display: grid; gap: 8px; align-content: center; min-height: 218px; padding: 18px; border-radius: 18px; background: var(--bg); font-size: 13px; line-height: 1.3; }
.mini b { font-weight: 700; } .mini small { display: block; color: var(--muted); font-size: 11.5px; } .mini em { font-style: normal; font-weight: 700; margin-left: auto; white-space: nowrap; }
.mini .app-row { box-shadow: 0 1px 0 var(--line); } .mini .app-total strong { font-size: 34px; }
.ghost-row { opacity: .55; scale: .96; } .ghost-row.g2 { opacity: .28; scale: .92; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; max-width: 460px; } }

/* ---------- Funciones: escenario oscuro que avanza con el scroll ---------- */
.features { --ink: #F3F4F6; --muted: #B4B8CC; --line: rgba(255, 255, 255, .16); --stroke: #F3F4F6; --indigo: #A9A8FF; --surface: rgba(255, 255, 255, .08); position: relative; margin-inline: clamp(8px, 1.5vw, 20px); border-radius: clamp(28px, 5vw, 56px); background: #171721; color: var(--ink); overflow: clip; }
.feat-pin { position: relative; padding-block: clamp(72px, 10vw, 120px); overflow: hidden; }
.aurora { position: absolute; inset: 0; pointer-events: none; }
.aurora i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .6; animation: aurora 16s ease-in-out infinite alternate; }
.aurora i:nth-child(1) { width: 46vw; height: 46vw; left: -12vw; top: -16vw; background: #4B4ACF; }
.aurora i:nth-child(2) { width: 40vw; height: 40vw; right: -8vw; bottom: -18vw; background: #6A2FD6; animation-delay: -6s; }
.aurora i:nth-child(3) { width: 22vw; height: 22vw; right: 26vw; top: 8vh; background: #C06BE0; opacity: .3; animation-delay: -11s; }
@keyframes aurora { to { transform: translate(7vw, 6vh) scale(1.25); } }
@keyframes spin { to { rotate: 360deg; } }
.feat { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.feat-copy .section-head { margin-bottom: 28px; }
.feat-list { display: grid; gap: 6px; }
.feat-item { position: relative; overflow: hidden; border-radius: 22px; border: 1px solid transparent; transition: background-color .4s, border-color .4s; }
.feat-item button { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 12px 20px; border: 0; background: none; text-align: left; font: 400 clamp(1.2rem, 2vw, 1.55rem)/1.2 var(--display); letter-spacing: -.02em; color: var(--muted); border-radius: 22px; }
.feat-item button::after { content: ''; width: 10px; height: 10px; border-radius: 999px; background: var(--line); transition: background-color .3s, scale .3s, box-shadow .3s; }
.feat-item button:hover { color: var(--ink); }
.feat-item p { position: relative; overflow: hidden; padding-inline: 20px; color: var(--muted); max-height: 0; opacity: 0; transition: max-height .5s var(--ease), opacity .35s, padding .5s var(--ease); }
.feat-item.is-on { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.feat-item.is-on button { color: var(--ink); } .feat-item.is-on button::after { background: var(--yellow); scale: 1.3; box-shadow: 0 0 16px 4px rgba(169, 168, 255, .7); }
.feat-item.is-on p { max-height: 12em; opacity: 1; padding-bottom: 18px; }
.feat-item.is-on::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: linear-gradient(90deg, #A9A8FF, #FFFFFF); transform-origin: left; transform: scaleX(var(--fp, 1)); }
.feat-stage { position: relative; display: grid; place-items: center; min-height: 640px; perspective: 1400px; }
.halo { position: absolute; width: min(108%, 540px); aspect-ratio: 1; border-radius: 50%; background: conic-gradient(#4B4ACF, #A9A8FF, #E7A6FF, #7A3FE0, #4B4ACF); filter: blur(52px); opacity: .7; animation: spin 14s linear infinite; }
.feat-stage .phone { transform: none; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .34), inset 0 0 0 5px #0b0c10, 0 0 0 1px rgba(0, 0, 0, .6), 0 0 100px rgba(130, 120, 255, .55); }
.feat-stage .phone.flip { animation: swap .7s var(--ease); }
@keyframes swap { 35% { transform: rotateY(-18deg) rotateX(4deg) scale(.96); } }
.features .phone-screen, .fan .phone-screen { --bg: #171721; --surface: #1E1E2A; --ink: #EDEDF3; --muted: #C3C3CC; --indigo: #9C9BF5; --indigo-soft: #24244A; --green: #7AD6A4; --green-soft: #16301F; --amber: #F2B25C; --amber-soft: #38290F; --line: rgba(243, 244, 246, .14); }
.screen { position: absolute; inset: 0 0 52px; opacity: 0; visibility: hidden; transform: translateY(26px) scale(.96); filter: blur(6px); transition: opacity .4s, transform .55s var(--ease), filter .4s, visibility 0s .4s; }
.screen.is-on { opacity: 1; visibility: visible; transform: none; filter: none; transition-delay: 0s; }
.screen.is-on > * { animation: rowIn .55s var(--ease) both; }
.screen.is-on > :nth-child(2) { animation-delay: .06s; } .screen.is-on > :nth-child(3) { animation-delay: .12s; } .screen.is-on > :nth-child(4) { animation-delay: .18s; } .screen.is-on > :nth-child(5) { animation-delay: .24s; } .screen.is-on > :nth-child(6) { animation-delay: .3s; } .screen.is-on > :nth-child(7) { animation-delay: .36s; }
@keyframes rowIn { from { opacity: 0; translate: 0 14px; } }
.screen.has-shot { inset: 34px 0 0; padding: 0; z-index: 2; background: #171721; }
.phone-screen.has-shot { padding-top: 34px; background: #F6F6F8; } .phone-screen.has-shot.dark { background: #171721; }
.has-shot > :not(.shot-img) { display: none; }
.has-shot > .shot-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.feat-stage .app-tabs { margin-top: auto; position: relative; z-index: 1; }
.feat-caption { display: none; }
@media (min-width: 861px) and (min-height: 720px) and (prefers-reduced-motion: no-preference) {
  .js .feat-track { height: 520vh; }
  .js .feat-pin { position: sticky; top: 0; height: 100vh; padding-block: 84px 12px; display: grid; align-items: center; }
  .js .feat-pin .section-head { gap: 10px; margin-bottom: 18px; } .js .feat-pin h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
  .js .feat-stage { min-height: 0; }
}
@media (max-width: 860px) {
  .feat { grid-template-columns: minmax(0, 1fr); gap: 20px; } .feat-copy { min-width: 0; }
  .feat-list { display: flex; gap: 8px; overflow-x: auto; margin-inline: calc(clamp(40px, 9vw, 96px) / -2); padding: 4px calc(clamp(40px, 9vw, 96px) / 2) 12px; scroll-snap-type: x proximity; scrollbar-width: none; }
  .feat-list::-webkit-scrollbar { display: none; }
  .feat-item { flex: none; scroll-snap-align: center; border-radius: 999px; border-color: var(--line); }
  .feat-item button { padding: 10px 18px; font: 800 1rem/1.2 var(--body); white-space: nowrap; } .feat-item button::after, .feat-item.is-on::after { display: none; }
  .feat-item p { display: none; }
  .feat-item.is-on { background: #F3F4F6; border-color: #F3F4F6; } .feat-item.is-on button { color: #171721; }
  .feat-stage { min-height: 0; padding-block: 36px 0; }
  .feat-caption { position: relative; display: block; margin-top: 28px; text-align: center; color: var(--muted); max-width: 30em; min-height: 5em; }
}

/* ---------- Privacidad ---------- */
.privacy-band { margin: 12px clamp(8px, 1.5vw, 20px) 0; padding-block: clamp(80px, 11vw, 144px); border-radius: clamp(28px, 5vw, 56px); background: var(--indigo-soft); }
.privacy-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: 32px clamp(32px, 6vw, 80px); align-items: center; }
.privacy-grid > div { display: grid; gap: 24px; justify-items: start; }
.illo-lock { width: min(100%, 260px); justify-self: center; fill: none; stroke: var(--stroke); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.lk-phone { fill: var(--surface); } .lk-lock { fill: var(--indigo); } .lk-dot { fill: #fff; stroke: none; } .lk-dot + path { stroke: #fff; }
.lk-waves { stroke: var(--indigo); animation: pulse 3.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.privacy-points { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 24px; }
.privacy-points li { display: grid; gap: 8px; align-content: start; padding: 28px; border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); }
.privacy-points li p { color: var(--muted); }
@media (max-width: 860px) { .privacy-grid, .privacy-points { grid-template-columns: 1fr; } .illo-lock { width: 180px; grid-row: 1; justify-self: start; } }

/* ---------- Para quién ---------- */
.who-list { display: flex; flex-wrap: wrap; gap: 6px 32px; font: 400 clamp(1.8rem, 4.6vw, 3.6rem)/1.15 var(--display); letter-spacing: -.02em; }
.world { position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; min-height: 420px; gap: clamp(24px, 5vw, 72px); margin-top: clamp(48px, 7vw, 88px); padding: clamp(40px, 6vw, 88px) clamp(28px, 5vw, 72px); border-radius: clamp(28px, 4vw, 44px); background: #171721; color: #F3F4F6; }
.world::before { content: ''; position: absolute; width: 60%; aspect-ratio: 1; right: -12%; top: -40%; border-radius: 50%; background: #4B4ACF; filter: blur(90px); opacity: .7; animation: aurora 14s ease-in-out infinite alternate; }
.world-dots { position: absolute; inset: -40px; background: radial-gradient(circle, rgba(255, 255, 255, .3) 1.2px, transparent 1.7px) 0 0 / 22px 22px; -webkit-mask-image: radial-gradient(ellipse 60% 80% at 72% 50%, #000, transparent 72%); mask-image: radial-gradient(ellipse 60% 80% at 72% 50%, #000, transparent 72%); animation: dots 50s linear infinite; }
@keyframes dots { to { background-position: 220px 110px; } }
.world-num { position: relative; display: flex; align-items: baseline; gap: .5rem; }
.world-num strong { font: 400 clamp(8rem, 22vw, 17rem)/.8 var(--display); letter-spacing: -.04em; font-variant-numeric: tabular-nums; background: linear-gradient(100deg, #fff 20%, #A9A8FF 45%, #E7A6FF 60%, #fff 80%) 0 0 / 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 7s linear infinite; }
@keyframes sheen { to { background-position: -220% 0; } }
.world-num span { font: 400 clamp(2rem, 4.6vw, 3.8rem)/1 var(--display); }
.world > p { position: relative; max-width: 26em; padding-bottom: .6em; font-size: 1.15rem; color: #D5D8E6; }
.world-chips { position: absolute; inset: 0; }
.world-chips span { position: absolute; left: var(--x); top: var(--y); padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: .9rem; font-weight: 700; white-space: nowrap; translate: 0 calc((var(--p, .5) - .5) * var(--k) * 1px); animation: bob 7s ease-in-out infinite; }
.world-chips span:nth-child(2n) { animation-delay: -3s; } .world-chips span:nth-child(3n) { animation-delay: -5s; }
@media (max-width: 760px) { .world { grid-template-columns: 1fr; align-items: start; padding-top: 96px; } .world { min-height: 0; } .world-chips span { top: calc(var(--y) * .3); left: calc((var(--x) - 45%) * 1.9); } .world-chips span:nth-child(n+4) { display: none; } }

/* ---------- Precios ---------- */
.pricing { background: var(--alt); }
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
.plan { position: relative; display: grid; gap: 16px; align-content: start; grid-template-rows: auto auto 1fr auto; padding: clamp(24px, 3vw, 36px); border-radius: var(--r-card); background: var(--page); border: 1px solid var(--line); }
.plan h3 { font: 400 1.9rem/1.1 var(--display); letter-spacing: -.02em; }
.plan p { color: var(--muted); }
.plan-annual { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo), 0 40px 80px -48px color-mix(in srgb, var(--indigo) 75%, transparent); }
.plan-founders { background: var(--band); color: #F3F4F6; border-color: transparent; grid-template-rows: auto auto 1fr auto auto; }
.spots { display: grid; gap: 10px; }
.spots-dots { display: grid; grid-template-columns: repeat(15, 1fr); gap: 5px; }
.spots-dots i { aspect-ratio: 1; border-radius: 50%; background: #fff; } .spots-dots i.gone { background: rgba(255, 255, 255, .2); }
.js .plans .spots-dots i { scale: 0; transition: scale .4s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(var(--i) * 25ms + .3s); } .js .plans.in .spots-dots i { scale: 1; }
.spots small { font-size: .88rem; font-weight: 600; color: #D5D8E6; }
.plan-founders.is-out { opacity: .6; } .plan-founders.is-out .btn { pointer-events: none; }
.plan-founders p, .plan-founders .price span { color: #B4B8CC; }
.plan-founders .btn-primary { background: #fff; color: #272735; box-shadow: none; }
.price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; min-height: 64px; }
.price strong { font: 400 clamp(2.2rem, 4vw, 3rem)/1 var(--display); letter-spacing: -.03em; }
.price span { color: var(--muted); font-weight: 700; font-size: .95rem; }
.price-slot.is-empty { padding: 10px 16px; border: 1.5px dashed currentColor; border-radius: var(--r-ctl); font: 700 .95rem/1.2 var(--body); letter-spacing: 0; opacity: .7; }
.plan .btn { width: 100%; padding-inline: 12px; font-size: clamp(.9rem, 1.25vw, 1.0625rem); }
.plans-note { margin-top: 32px; color: var(--muted); text-align: center; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

/* ---------- Preguntas ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 6vw, 88px); align-items: start; }
.faq .section-head { position: sticky; top: 112px; margin: 0; }
.faq-list { display: grid; gap: 10px; }
details { border-radius: 22px; background: var(--surface); border: 1px solid var(--line); }
summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 24px; font-weight: 800; font-size: 1.1rem; letter-spacing: -.01em; cursor: pointer; list-style: none; border-radius: 22px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ''; flex: none; width: 14px; height: 14px; background: linear-gradient(var(--ink) 0 0) center / 100% 2.5px no-repeat, linear-gradient(var(--ink) 0 0) center / 2.5px 100% no-repeat; transition: rotate .3s var(--ease); }
details[open] summary::after { rotate: 135deg; }
details p { padding: 0 24px 22px; color: var(--muted); max-width: 44em; }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } .faq .section-head { position: static; } }

/* ---------- Cierre ---------- */
.closing { position: relative; overflow: hidden; margin: 0 clamp(8px, 1.5vw, 20px) clamp(8px, 1.5vw, 20px); padding-block: clamp(96px, 13vw, 176px); border-radius: clamp(28px, 5vw, 56px); background: #171721; color: #F3F4F6; text-align: center; }
.closing .wrap { position: relative; display: grid; gap: 24px; justify-items: center; }
.closing h2 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); max-width: 13em; scale: calc(.82 + min(var(--p, .5), .5) * .36); }
.closing p { font-size: 1.2rem; color: #B4B8CC; } .closing .cta-note { font-size: .95rem; }
.closing .cta-row { justify-content: center; margin-top: 8px; }

/* ---------- Pie ---------- */
.footer { padding-block: clamp(48px, 7vw, 88px) 32px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; }
.footer-grid > div { display: grid; gap: 12px; align-content: start; justify-items: start; }
.footer nav { display: grid; gap: 10px; align-content: start; justify-items: start; }
.footer h2 { font: 800 .95rem/1.4 var(--body); letter-spacing: 0; color: var(--muted); }
.footer nav a { text-decoration: none; font-weight: 600; } .footer nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer-base { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } .footer-grid > div { grid-column: 1 / -1; } }

/* ---------- Páginas de texto (Guía, Privacidad, Términos, Contacto) ---------- */
.page { background: var(--alt); }
.doc { max-width: 760px; padding-block: clamp(56px, 8vw, 112px); display: grid; gap: 28px; }
.doc h1 { font-size: clamp(2.6rem, 6vw, 4.4rem); }
.doc section { display: grid; gap: 8px; padding: 28px; border-radius: var(--r-card); background: var(--surface); }
.doc section h2 { font: 800 1.3rem/1.3 var(--body); letter-spacing: -.015em; }
.doc section p { color: var(--muted); }
.notice { padding: 14px 18px; border-radius: var(--r-ctl); background: var(--amber-soft); color: var(--amber); font-weight: 700; font-size: .95rem; }
.contact-card { display: grid; gap: 14px; justify-items: start; padding: clamp(28px, 4vw, 44px); border-radius: var(--r-card); background: var(--indigo-soft); }
.contact-card .muted { font-weight: 700; }
.contact-mail { font: 400 clamp(1.6rem, 5.4vw, 3rem)/1.1 var(--display); letter-spacing: -.02em; overflow-wrap: anywhere; }


/* ---------- Contacto con formulario ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; padding-block: clamp(56px, 8vw, 112px); }
.contact-copy { display: grid; gap: 28px; justify-items: start; position: sticky; top: 120px; }
.contact h1 { font-size: clamp(3rem, 7vw, 5.4rem); }
.cform-box { padding: clamp(24px, 3.4vw, 44px); border-radius: var(--r-card); background: var(--surface); border: 1px solid var(--line); box-shadow: 0 40px 80px -48px rgba(15, 17, 21, .35); }
.cform { display: grid; gap: 20px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.field label { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-weight: 800; font-size: .95rem; }
.field label svg { width: 20px; height: 20px; fill: none; stroke: var(--indigo); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.field input, .field textarea, .field select { width: 100%; font: 500 1rem/1.4 var(--body); color: var(--ink); background: var(--bg); border: 1.5px solid transparent; border-radius: var(--r-ctl); padding: 15px 16px; outline: 0; transition: border-color .2s, box-shadow .2s, background-color .2s; }
.field textarea { min-height: 150px; resize: vertical; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--line); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--indigo); background: var(--surface); box-shadow: 0 0 0 4px color-mix(in srgb, var(--indigo) 22%, transparent); }
.cform .btn { width: 100%; } .cform .btn:disabled { opacity: .6; cursor: progress; }
.cform-priv { font-size: .88rem; color: var(--muted); text-align: center; }
.cform-note { display: none; padding: 12px 16px; border-radius: var(--r-ctl); background: var(--indigo-soft); font-weight: 700; font-size: .95rem; text-align: center; }
.cform-note.on { display: block; } .cform-note.err { background: var(--amber-soft); color: var(--amber); }
.cform-sent { display: grid; gap: 14px; justify-items: center; text-align: center; padding-block: 48px; outline: 0; }
.cform-sent[hidden], .cform[hidden] { display: none; }
.cform-sent h2 { font-size: 2rem; } .cform-sent p { color: var(--muted); max-width: 26em; }
.sent-check { width: 84px; fill: var(--green-soft); stroke: var(--green); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.sent-check circle { stroke: none; } .sent-check path { stroke-dasharray: 50; stroke-dashoffset: 50; animation: check .6s var(--ease) .15s forwards; }
.sent-check { animation: pop .5s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes check { to { stroke-dashoffset: 0; } }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } .contact-copy { position: static; } }

/* ---------- Aparición al hacer scroll ---------- */
.js [data-reveal]:not(.steps) { opacity: 0; translate: 0 40px; filter: blur(10px); transition: opacity .8s var(--ease), translate 1s var(--ease), filter .8s var(--ease); }
.js [data-reveal].in { opacity: 1; translate: none; filter: none; }

/* ---------- Efectos ---------- */
/* Portada: brillo, órbita, tarjetas en profundidad, título palabra por palabra */
.glow { position: absolute; width: 380px; aspect-ratio: 1; right: -6%; bottom: 2%; border-radius: 50%; background: #4B4ACF; filter: blur(80px); opacity: .32; animation: aurora 12s ease-in-out infinite alternate; }
.float.ghost { z-index: 0; } .ghost .float-in { scale: .84; opacity: .5; filter: blur(1.6px); box-shadow: none; }
.g1 { top: 20%; left: -38%; rotate: 3deg; } .g2 { top: 12%; right: -34%; rotate: -4deg; } .g3 { bottom: 34%; right: -40%; rotate: 3deg; } .g4 { bottom: 3%; left: -30%; rotate: -3deg; }
.g2 .float-in { animation-delay: -4s; } .g3 .float-in { animation-delay: -2.5s; } .g4 .float-in { animation-delay: -5s; }
.js.ready .hero .ghost { animation-delay: 1.7s; }
@media (max-width: 1180px) { .g1, .g4 { display: none; } }
@media (max-width: 960px) { .ghost { display: none; } }
.w { display: inline-block; overflow: hidden; vertical-align: bottom; padding: .08em .02em .16em; margin: -.08em -.02em -.16em; }
.w > span { display: inline-block; }
.js.ready .w > span { animation: wordUp 1s var(--ease) both; animation-delay: calc(var(--i) * 70ms + 100ms); }
@keyframes wordUp { from { transform: translateY(115%) rotate(6deg); } }

/* Barra de avance en la navegación */
.nav::after { content: ''; position: absolute; left: 30px; right: 30px; bottom: -1px; height: 3px; border-radius: 3px; background: var(--indigo); transform-origin: left; transform: scaleX(var(--sp, 0)); }

/* Botones: brillo que cruza y efecto imán */
.btn-primary, .btn-ink { position: relative; overflow: hidden; }
.btn-primary::after, .btn-ink::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .38) 50%, transparent 70%); translate: -120% 0; }
.btn-primary:hover::after, .btn-ink:hover::after { translate: 120% 0; transition: translate .7s ease; }
[data-magnet] { transition: translate .3s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease); }

/* Luz que sigue al cursor */
.spot { position: relative; }
.spot::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--indigo) 26%, transparent), transparent 70%); }
.spot:hover::before { opacity: 1; }
.spot > * { position: relative; }

/* Tarjetas que se inclinan en 3D */
.tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s var(--ease), box-shadow .25s var(--ease), opacity .6s, scale .8s cubic-bezier(.34, 1.56, .64, 1); }

/* Ilustraciones que se dibujan */
.js.draw [data-draw] path, .js.draw [data-draw] circle, .js.draw [data-draw] rect:not([class^="fill"]) { stroke-dasharray: var(--len, 0); stroke-dashoffset: var(--len, 0); transition: stroke-dashoffset 1.5s ease .35s; }
.js.draw [data-draw].in path, .js.draw [data-draw].in circle, .js.draw [data-draw].in rect { stroke-dashoffset: 0; }

/* Pasos: las tarjetas entran una tras otra y su pantalla se anima */
.js .steps .step { opacity: 0; translate: 0 48px; transition: opacity .7s, translate .9s var(--ease); }
.js .steps.in .step { opacity: 1; translate: none; }
.js .steps .step:nth-child(2) { transition-delay: .15s; } .js .steps .step:nth-child(3) { transition-delay: .3s; }
.js .steps .pop { scale: 0; transition: scale .5s cubic-bezier(.34, 1.56, .64, 1) 1s; } .js .steps .pop.p2 { transition-delay: 1.35s; }
.js .steps.in .pop { scale: 1; }
.js .steps .ghost-row { translate: 0 -14px; opacity: 0; transition: translate .7s var(--ease) .8s, opacity .6s .8s; } .js .steps .ghost-row.g2 { transition-delay: 1.05s; }
.js .steps.in .ghost-row { translate: none; opacity: .55; } .js .steps.in .ghost-row.g2 { opacity: .28; }

/* Profesiones: una sola línea lenta */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.marquee { width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; border-block: 1px solid var(--line); padding-block: clamp(22px, 3vw, 38px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-row { translate: calc((var(--p, .5) - .5) * -220px) 0; }
.marquee-track { display: flex; width: max-content; font: 400 clamp(2.2rem, 5.4vw, 4.4rem)/1.1 var(--display); letter-spacing: -.025em; animation: marquee 70s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span { display: inline-flex; align-items: center; white-space: nowrap; }
.marquee span::after { content: ''; width: .16em; height: .16em; margin-inline: .6em; background: var(--indigo); rotate: 45deg; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Contador de la función activa */
.feat-count { display: none; position: relative; margin-top: 20px; font-size: .95rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }
.feat-count b { color: var(--ink); }
@media (min-width: 861px) and (min-height: 720px) and (prefers-reduced-motion: no-preference) { .js .feat-count { display: block; } }

/* Ideas de las referencias: aviso, anillo de luz, ventajas, dos tonos, abanico */
.tone { color: var(--indigo); }
.closing { --indigo: #A9A8FF; padding-bottom: 0; }
.announce { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--indigo-soft); color: var(--ink); font-size: .92rem; font-weight: 600; text-decoration: none; transition: background-color .2s; }
.announce b { padding: 3px 10px; border-radius: 999px; background: var(--indigo); color: var(--page); font-size: .78rem; font-weight: 700; }
.announce svg { transition: translate .25s var(--ease); } .announce:hover svg { translate: 4px 0; }
@property --ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.aura { position: relative; display: inline-flex; border-radius: 999px; isolation: isolate; }
.aura::before, .aura::after { content: ''; position: absolute; inset: -2.5px; z-index: -1; border-radius: inherit; background: conic-gradient(from var(--ang), #4B4ACF, #A9A8FF, #E7A6FF, #FFFFFF, #7A3FE0, #4B4ACF); animation: ang 3.6s linear infinite; }
.aura::after { inset: -4px; filter: blur(14px); opacity: .65; }
.aura .btn-primary { box-shadow: none; }
@keyframes ang { to { --ang: 360deg; } }
.checks { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .95rem; font-weight: 600; color: var(--muted); }
.checks li { display: inline-flex; align-items: center; gap: 7px; } .checks svg { color: var(--green); }
.fan { position: relative; display: flex; justify-content: center; align-items: flex-start; height: clamp(300px, 34vw, 420px); margin-top: clamp(48px, 6vw, 80px); }
.fan .phone { flex: none; transform: none; transition: translate .4s var(--ease); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .34), inset 0 0 0 5px #0b0c10, 0 0 0 1px rgba(0, 0, 0, .6), 0 0 90px rgba(130, 120, 255, .45); }
.fan-c { z-index: 2; translate: 0 calc((1 - var(--p, .5)) * 120px - 40px); }
.fan-l { rotate: -9deg; margin-right: -70px; translate: 0 calc((1 - var(--p, .5)) * 240px - 20px); }
.fan-r { rotate: 9deg; margin-left: -70px; translate: 0 calc((1 - var(--p, .5)) * 240px - 20px); }
@media (max-width: 1100px) { .fan { zoom: .82; } }
@media (max-width: 760px) { .fan { zoom: .6; } .hero .aura { display: flex; width: 100%; } }
.js.ready .hero-copy > :nth-child(5) { animation-delay: .36s; }

/* Identidad de la app: todo DM Sans, títulos en peso 400 y espaciado apretado */
.who-list, .marquee-track, .world-num strong, .world-num span, .price strong, .plan h3, .step h3, .fix h3, .app-head b, .app-total strong, .feat-item button, .contact-mail, .logo-word { letter-spacing: -.03em; }
.marquee-track { font-size: clamp(1.9rem, 4.4vw, 3.6rem); } .world-num strong { letter-spacing: -.06em; }
.s-note { font: 500 15px/28px var(--body); } .s-sticky { font: 600 17px/1.25 var(--body); }
.region { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; font-weight: 600; color: var(--muted); }
.region select { font: 600 1rem/1.2 var(--body); color: var(--ink); padding: 10px 40px 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--page) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%235A5B68' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center / 12px; -webkit-appearance: none; appearance: none; }
.plan-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plan-badge { padding: 4px 12px; border-radius: 999px; background: var(--indigo-soft); color: var(--indigo); font-size: .82rem; font-weight: 700; white-space: nowrap; } .plan-badge:empty, .price-was:empty { display: none; }
.plan-founders .plan-badge { background: rgba(255, 255, 255, .14); color: #fff; }
.price-was { color: var(--muted); font-size: 1.1rem; font-weight: 500; text-decoration-thickness: 1.5px; } .plan-founders .price-was { color: #B4B8CC; }

/* ---------- Menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .hero-copy > *, .js .hero .phone, .js .hero .blob, .js .hero .float, .js [data-reveal] { opacity: 1 !important; translate: none; filter: none; }
  .js .plans .spots-dots i { scale: 1; } .js .scrub .sw { opacity: 1; } .js .steps .step { opacity: 1; translate: none; } .js .steps .pop { scale: 1; }
  .steps::before { clip-path: none; }
  .js .steps .step-n,   }

/* ---------- Ventana: email antes de pagar y contacto ---------- */
.hm-open, .hm-open body { overflow: hidden; }
.hm-bg { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: rgba(23, 23, 33, .45); backdrop-filter: blur(6px); animation: hmFade .25s var(--ease) both; }
.hm { position: relative; width: min(100%, 460px); max-height: 100%; overflow: auto; display: grid; gap: 10px; justify-items: stretch; text-align: left; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 24px; padding: clamp(20px, 4vw, 28px); box-shadow: 0 30px 80px rgba(23, 23, 33, .25); animation: hmUp .45s var(--ease) both; }
.hm h2 { font: 400 clamp(1.35rem, 3.4vw, 1.6rem)/1.15 var(--display); letter-spacing: -.03em; text-align: center; text-wrap: balance; }
.hm-mark { justify-self: center; width: 40px; height: 40px; font-size: 1.25rem; border-radius: 12px; }
.hm-lead { text-align: center; color: var(--muted); margin-top: -6px; font-size: .95rem; }
.hm-x { position: absolute; top: 14px; right: 16px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--indigo); font-size: 1.8rem; line-height: 1; cursor: pointer; }
.hm-x:hover { background: var(--soft); }
.hm-f { display: grid; gap: 5px; font-size: .95rem; } .hm-f > span { display: flex; gap: 10px; align-items: center; font-weight: 700; }
.hm-f svg { width: 20px; height: 20px; fill: none; stroke: var(--indigo); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.hm-f input, .hm-f textarea { font: inherit; font-size: 16px; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; resize: none; }
.hm-f input:focus, .hm-f textarea:focus { outline: 2px solid var(--indigo); outline-offset: 1px; }
.hm-go { width: 100%; justify-content: center; margin-top: 4px; }
.hm-err { color: var(--amber); font-size: .92rem; } .hm-foot { text-align: center; color: var(--muted); font-size: .88rem; }
@keyframes hmFade { from { opacity: 0; } } @keyframes hmUp { from { opacity: 0; translate: 0 24px; scale: .97; } }
/* Botón de contacto fijo */
.fab-dock { position: fixed; right: max(18px, env(safe-area-inset-right, 0px)); bottom: max(18px, env(safe-area-inset-bottom, 0px)); z-index: 60; display: flex; gap: 10px; align-items: center; }
.to-top { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 8px 24px rgba(23, 23, 33, .16); animation: hmFade .3s var(--ease) both; }
.to-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .to-top:hover { translate: 0 -2px; }
.contact-fab { display: inline-flex; gap: 8px; align-items: center; padding: 12px 18px; border: 0; border-radius: 999px; background: var(--ink); color: var(--surface); font: 700 .95rem var(--font, inherit); box-shadow: 0 12px 30px rgba(23, 23, 33, .25); cursor: pointer; transition: translate .2s var(--ease); }
.contact-fab:hover { translate: 0 -2px; } .contact-fab svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }

/* ---------- El problema: tarjetas luminosas, se tacha y aparece la solución ---------- */
.fix { position: relative; overflow: hidden; padding: 28px 26px 26px; border: 0; border-radius: 28px; background: linear-gradient(165deg, var(--indigo-soft), var(--surface) 70%); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); align-content: start; }
.fix::before { content: ""; position: absolute; width: 220px; height: 220px; right: -70px; top: -90px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--indigo) 22%, transparent), transparent 70%); pointer-events: none; }
.js .fix h3 { text-decoration: none; position: relative; justify-self: start; color: var(--ink); transition: color .6s var(--ease) calc(.9s + var(--dl, 0s)); }
.js .fix h3::after { content: ""; position: absolute; left: -3px; right: -3px; top: 55%; height: 3px; border-radius: 99px; background: var(--indigo); transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.7, 0, .2, 1) calc(.45s + var(--dl, 0s)); }
.js .fix.in h3 { color: var(--muted); } .js .fix.in h3::after { transform: scaleX(1); }
.fix .fix-new { margin-top: 14px; padding: 14px 16px; border-radius: 18px; background: var(--surface); box-shadow: 0 2px 16px rgba(23, 23, 33, .10); }
.js .fix .fix-new { opacity: 0; translate: 0 22px; scale: .96; transition: opacity .6s var(--ease) calc(1.15s + var(--dl, 0s)), translate .8s var(--ease) calc(1.15s + var(--dl, 0s)), scale .8s var(--ease) calc(1.15s + var(--dl, 0s)); }
.js .fix.in .fix-new { opacity: 1; translate: none; scale: 1; }
.js .fix .fix-new .dot { scale: 0; transition: scale .5s cubic-bezier(.3, 1.6, .5, 1) calc(1.45s + var(--dl, 0s)); } .js .fix.in .fix-new .dot { scale: 1; }
.fix:nth-child(2) { --dl: 1.3s; } .fix:nth-child(3) { --dl: 2.6s; }
@media (prefers-reduced-motion: reduce) { .js .fix h3::after { transform: scaleX(1); transition: none; } .js .fix .fix-new, .js .fix .fix-new .dot { opacity: 1; translate: none; scale: 1; transition: none; } }

/* ---------- Título: una ola de color recorre las palabras ---------- */
.js.ready .hero h1 .w > span { animation: wordUp 1s var(--ease) both, sweep 7s ease-in-out infinite; animation-delay: calc(var(--i) * 70ms + 100ms), calc(var(--i) * 75ms + 1.8s); }
.js.ready .hero h1 .w > span.tone { animation-name: wordUp, sweepTone; }
@keyframes sweep { 0%, 16%, 100% { color: var(--ink); } 6% { color: var(--indigo); text-shadow: 0 0 22px color-mix(in srgb, var(--indigo) 35%, transparent); } }
@keyframes sweepTone { 0%, 16%, 100% { color: var(--indigo); } 6% { color: var(--yellow); text-shadow: 0 0 22px color-mix(in srgb, var(--indigo) 45%, transparent); } }
@media (prefers-reduced-motion: reduce) { .js.ready .hero h1 .w > span { animation: none; } }

/* ---------- Cómo funciona: filas alternadas con panel luminoso (estilo Brex/Bevel) ---------- */
@media (min-width: 901px) {
  .steps { grid-template-columns: 1fr; gap: clamp(56px, 7vw, 96px); max-width: 1080px; margin-inline: auto; }
  .step { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto 1fr; column-gap: clamp(32px, 6vw, 88px); row-gap: 12px; padding: 0; background: none; border: 0; }
  .step > :not(.mini) { margin-inline: 0; grid-column: 2; } .step .step-n { grid-row: 2; margin-top: 0; } .step h3 { grid-row: 3; font-size: clamp(2rem, 3.2vw, 2.8rem); letter-spacing: -.035em; } .step p { grid-row: 4; font-size: 1.1rem; max-width: 42ch; }
  .step .mini { grid-column: 1; grid-row: 1 / 6; }
  .step:nth-child(even) .mini { grid-column: 2; } .step:nth-child(even) > :not(.mini) { grid-column: 1; }
}
.step .mini { display: grid; align-content: center; gap: 10px; min-height: 280px; padding: clamp(28px, 4vw, 48px); border-radius: 28px; border: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--indigo-soft) 90%, #d2e5ff), color-mix(in srgb, var(--surface) 70%, #fff9ee)); position: relative; overflow: hidden; }
.step .mini > * { background: var(--surface); border-radius: 16px; box-shadow: 0 2px 16px rgba(23, 23, 33, .10); position: relative; }
:root[data-theme="dark"] .step .mini { background: linear-gradient(180deg, #24244A, #1B1B25); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .step .mini { background: linear-gradient(180deg, #24244A, #1B1B25); } }

/* ---------- Carrusel en celular y tablet (tarjetas que antes se apilaban) ---------- */
@media (max-width: 900px) {
  .fixes, .steps, .plans, .privacy-points { display: flex !important; grid-template-columns: none !important; max-width: none !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: 14px !important; margin-inline: calc(-1 * max(16px, env(safe-area-inset-left, 0px))); padding: 6px max(16px, env(safe-area-inset-left, 0px)) 18px; scroll-padding-inline: max(16px, env(safe-area-inset-left, 0px)); }
  .fixes::-webkit-scrollbar, .steps::-webkit-scrollbar, .plans::-webkit-scrollbar, .privacy-points::-webkit-scrollbar { display: none; }
  .fixes > *, .steps > *, .plans > *, .privacy-points > * { flex: 0 0 86%; scroll-snap-align: start; }
  .step .mini { min-height: 200px; }
}

/* Controles del carrusel: flechas dentro de las tarjetas */
.car-wrap { display: contents; } .car-btn, .car-dots { display: none !important; }
.privacy-grid > .car-wrap { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .car-wrap { display: block; position: relative; }
  .car-btn { display: grid !important; place-items: center; position: absolute; top: calc(50% - 30px); z-index: 3; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--ink); cursor: pointer; box-shadow: 0 4px 14px rgba(23, 23, 33, .14); transition: opacity .25s; }
  .car-btn.prev { left: 6px; } .car-btn.next { right: 6px; }
  .car-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .car-btn:disabled { opacity: 0; pointer-events: none; }
  .car-dots { display: flex !important; justify-content: center; gap: 6px; margin-top: 4px; }
  .car-dots i { width: 7px; height: 7px; border-radius: 99px; background: color-mix(in srgb, var(--ink) 18%, transparent); transition: width .3s var(--ease), background-color .3s; cursor: pointer; }
  .car-dots i.on { width: 22px; background: var(--indigo); }
  .fixes > *, .steps > *, .plans > *, .privacy-points > * { transition: opacity .4s var(--ease), scale .4s var(--ease); }
  .car-off { opacity: .55; scale: .95; }
  /* Funciones: pastillas visibles, en dos o tres filas, sin cortarse */
  .feat-list { flex-wrap: wrap; overflow: visible !important; margin-inline: 0 !important; padding: 4px 0 12px !important; gap: 8px; }
  .feat-item { border-color: rgba(255, 255, 255, .28) !important; }
  .feat-item button { padding: 8px 14px !important; font-size: .92rem !important; color: rgba(255, 255, 255, .82) !important; }
  .feat-item.is-on button { color: #171721 !important; }
}
@media (max-width: 760px) {
  .world { padding-top: 40px !important; }
  .world-chips { position: static !important; order: 9; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
  .world-chips span { position: static !important; display: inline-block !important; }
  .world-chips span { font-size: .8rem; padding: 6px 11px; }
}

/* El problema: la escena queda fija mientras se ordena (se ve completa la transición) */
.chaos-pin { height: calc(520px + 90vh); }
.chaos-pin .chaos { --q: clamp(0, (var(--p, 1) - .08) / .7, 1); position: sticky; top: max(84px, calc(50vh - 250px)); margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .chaos-pin { height: auto; } .chaos-pin .chaos { position: relative; top: 0; } }
/* Precios: solo la región de quien visita */
.region { flex-wrap: wrap; } .region select { display: none; } .region.open select { display: inline-block; } .region.open .region-name, .region.open .region-change { display: none; }
.region-name { font-weight: 700; color: var(--ink); } .region-change { border: 0; background: none; cursor: pointer; font: inherit; font-size: .9rem; color: var(--indigo); text-decoration: underline; text-underline-offset: 3px; }

/* Para quién: tarjetas luminosas con anillo que se completa (estilo Bevel) */
.who-grid { list-style: none; padding: 0; margin: clamp(28px, 4vw, 48px) 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.who-grid li { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 22px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 14%, var(--surface)), var(--surface) 75%); border: 1px solid color-mix(in srgb, var(--c) 18%, var(--line)); transition: translate .3s var(--ease), box-shadow .3s; }
.who-grid li:hover { translate: 0 -3px; box-shadow: 0 10px 28px color-mix(in srgb, var(--c) 22%, transparent); }
.who-grid b { font: 500 1.08rem/1.2 var(--display); letter-spacing: -.02em; color: var(--ink); }
.who-ring { position: relative; flex: none; width: 52px; height: 52px; display: grid; place-items: center; }
.who-ring svg:first-child { position: absolute; inset: 0; rotate: -90deg; } .who-ring circle { fill: none; stroke-width: 5; }
.who-ring .tr { stroke: color-mix(in srgb, var(--c) 18%, transparent); } .who-ring .pr { stroke: var(--c); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.3s var(--ease) calc(var(--i) * 110ms + .2s); }
.who-grid.in .pr { stroke-dashoffset: calc(1 - var(--pct)); }
.who-ic { width: 22px; height: 22px; fill: none; stroke: var(--c); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.js .who-grid li { opacity: 0; translate: 0 18px; transition: opacity .6s var(--ease) calc(var(--i) * 90ms), translate .7s var(--ease) calc(var(--i) * 90ms), box-shadow .3s; }
.js .who-grid.in li { opacity: 1; translate: none; }
.js .who-grid[data-reveal] { opacity: 1; translate: none; filter: none; }
@media (max-width: 520px) { .who-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .who-grid li { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; } .who-grid b { font-size: .98rem; } }
@media (prefers-reduced-motion: reduce) { .who-ring .pr { transition: none; } .js .who-grid li { opacity: 1; translate: none; } }

/* Privacidad: muro de capturas reales de la app de fondo, inclinado y difuminado */
.privacy-band { position: relative; overflow: hidden; isolation: isolate; }
.shot-wall { position: absolute; inset: -20% -10%; z-index: -1; display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; rotate: -10deg; opacity: .24; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 70% 65% at 75% 50%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 65% at 75% 50%, #000 20%, transparent 75%); }
.shot-wall img { width: 100%; border-radius: 22px; box-shadow: 0 10px 30px rgba(23, 23, 33, .25); }
.shot-wall img:nth-child(odd) { translate: 0 18%; }
@media (max-width: 760px) { .shot-wall { grid-template-columns: repeat(3, 1fr); opacity: .12; } }

/* Precios: sin selector, se detecta el país */
.region { display: none !important; }

/* Para quién: carrusel continuo de tarjetas en dos filas que se mueven en sentidos opuestos */
.who-marquee { display: grid !important; grid-template-columns: none !important; gap: 14px !important; width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden; padding-block: 6px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.who-row { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; width: max-content; animation: whoMove 46s linear infinite; }
.who-row:nth-child(2) { animation-direction: reverse; animation-duration: 54s; }
.who-marquee:hover .who-row { animation-play-state: paused; }
.who-row li { flex: none; width: clamp(220px, 24vw, 270px); }
@keyframes whoMove { to { translate: calc(-50% - 7px) 0; } }
@media (max-width: 520px) { .who-row li { width: 170px; flex-direction: column; align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .who-row { animation: none; flex-wrap: wrap; width: auto; } .who-marquee { width: auto; margin-left: 0; -webkit-mask-image: none; mask-image: none; } }

/* Problema: tarjetas parejas, con los recuadros blancos alineados */
@media (min-width: 901px) {
  .fixes { grid-template-rows: auto auto auto; align-items: stretch; }
  .fix { grid-row: span 3; grid-template-rows: subgrid; row-gap: 10px; }
  .fix .fix-new { align-self: stretch; margin-top: 14px; }
}

/* Celular y tablet: carrusel de privacidad dentro de la banda, sin cortes */
@media (max-width: 900px) {
  .privacy-points { margin-inline: 0 !important; padding-inline: 0 !important; scroll-padding-inline: 0 !important; }
  .privacy-grid > .car-wrap { width: 100%; min-width: 0; }
  .car-dots { width: 100%; }
}
/* Celular: monedas dispersas en su propio espacio */
@media (max-width: 760px) {
  .world-chips { position: relative !important; display: block !important; height: 214px; margin-top: 10px; }
  .world-chips span { position: absolute !important; }
  .world-chips span:nth-child(1) { left: 2% !important; top: 8px !important; } .world-chips span:nth-child(2) { left: 38% !important; top: 0px !important; } .world-chips span:nth-child(3) { left: 70% !important; top: 26px !important; } .world-chips span:nth-child(4) { left: 10% !important; top: 56px !important; } .world-chips span:nth-child(5) { left: 42% !important; top: 62px !important; } .world-chips span:nth-child(6) { left: 70% !important; top: 78px !important; } .world-chips span:nth-child(7) { left: 0% !important; top: 108px !important; } .world-chips span:nth-child(8) { left: 32% !important; top: 100px !important; } .world-chips span:nth-child(9) { left: 62% !important; top: 126px !important; } .world-chips span:nth-child(10) { left: 14% !important; top: 158px !important; } .world-chips span:nth-child(11) { left: 48% !important; top: 168px !important; } 
}

@media (max-width: 900px) { .privacy-grid { grid-template-columns: minmax(0, 1fr) !important; } .privacy-points { min-width: 0; width: 100% !important; max-width: 100% !important; box-sizing: border-box; } }