/* Versión 1a · Todo ocurre dentro de la pantalla congelada. */
body.v-congelada { font-family: "Space Grotesk", system-ui, sans-serif; color: var(--paper);
  background: radial-gradient(120% 70vh at 20% 0%, #183a33 0%, var(--night) 55%, var(--night-deep) 100%) no-repeat, var(--night-deep); }
body.v-congelada::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 64px 64px; }
.v-congelada main, .v-congelada .topnav, .v-congelada .site-footer { position: relative; z-index: 1; }
.v-congelada .frozen, .v-congelada .desktop { background: none; color: var(--paper); }
.v-congelada .frozen::before { display: none; }
.v-congelada h1, .v-congelada h2 { letter-spacing: -.02em; }

.topnav { display: flex; align-items: center; justify-content: space-between; padding: 22px 48px; }
.topnav .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-size: 17px; }
.topnav .brand small { font-size: 12px; color: rgba(242, 245, 242, .55); margin-left: 4px; }
.topnav nav { display: flex; align-items: center; gap: 26px; font-size: 14px; }
.topnav nav > a { color: rgba(242, 245, 242, .78); text-decoration: none; }
.topnav nav > a:hover { color: #fff; }
.langpill { display: flex; border: 1px solid rgba(255, 255, 255, .25); border-radius: 6px; overflow: hidden; font-size: 12px; font-weight: 500; }
.langpill > * { padding: 4px 9px; color: var(--paper); text-decoration: none; }
.langpill [aria-current] { background: #2fa84f; color: #fff; }

.hero-frozen { padding: 56px 48px 0; }
.hero-stage { position: relative; max-width: 1184px; margin: 0 auto; padding-right: 72px; }
.hero-selection { min-height: 470px; padding: 62px 64px 70px; }
.hero-selection .hero-copy { max-width: 580px; gap: 22px; }
.v-congelada h1 { font-size: clamp(2.4rem, 4.7vw, 3.75rem); line-height: 1.02; }
.v-congelada .lead { color: var(--paper-soft); font-size: 1.1875rem; line-height: 1.45; }
.v-congelada .cta-note { color: rgba(242, 245, 242, .6); }
.v-congelada .button-green { border-radius: 10px; font-weight: 700; font-size: 16px; }
.v-congelada a.button-green:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(61, 220, 99, .25); }
.hero-result { position: absolute; right: 24px; bottom: -70px; width: min(340px, 30%); border-radius: 8px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08); }
.toolbar { position: absolute; right: 0; top: 0; width: 40px; padding: 7px 0; border-radius: 9px; background: var(--panel);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .08); display: grid; justify-items: center; gap: 3px; }
.tool { width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center; color: #fff; font-size: 13px; font-weight: 700; }
.tool svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tool.is-on { background: #2fa84f; }
.swatch { width: 15px; height: 15px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85); }
.actionbar { position: absolute; right: 72px; bottom: -132px; display: flex; gap: 4px; padding: 6px; border-radius: 9px; background: var(--panel); font-size: 13px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .08); }
.actionbar span { padding: 6px 10px; border-radius: 6px; color: rgba(255, 255, 255, .88); }
.hero-facts { list-style: none; max-width: 1184px; margin: 84px auto 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 36px; font-size: 13.5px; color: rgba(242, 245, 242, .62); }

.v-congelada #como-funciona .frozen-inner { padding-top: 130px; }

/* Gratis y Pro como paneles de la app */
.v-congelada .plans .section-lead { color: var(--paper-soft); }
.v-congelada .plans-inner { padding-top: 40px; }
.v-congelada .bigmenu { background: var(--panel); color: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .09); }
.v-congelada .bigmenu header p { color: var(--paper-soft); }
.v-congelada .bigmenu ul { border-color: rgba(255, 255, 255, .12); }
.v-congelada .bigmenu li:hover { background: #2fa84f; color: #fff; }
.v-congelada .bigmenu.is-pro { background: #10241d; box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 0 0 1.5px var(--leaf-bright); }
.v-congelada .bigmenu.is-pro li:hover { background: var(--leaf-bright); color: var(--night-deep); }
.v-congelada .settings-shot { margin-bottom: 0; box-shadow: 0 30px 70px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .1); }
.v-congelada .download .frozen-inner { padding-top: 170px; }
.v-congelada .site-footer { background: transparent; border-top: 1px solid rgba(255, 255, 255, .08); }

@media (max-width: 899px) {
  .topnav { padding: 16px 20px; }
  .topnav nav > a { display: none; }
  .hero-frozen { padding: 40px 22px 0; }
  .hero-stage { padding-right: 0; }
  .hero-selection { min-height: 0; padding: 34px 24px 28px; }
  .toolbar, .actionbar { display: none; }
  .hero-result { position: static; width: 100%; margin-top: 30px; }
  .hero-facts { margin-top: 36px; }
  .v-congelada #como-funciona .frozen-inner { padding-top: 96px; }
  .v-congelada .download .frozen-inner { padding-top: 120px; }
}

/* ── Movimiento: la página hace lo que hace la app ────────────────── */
/* La retícula respira muy despacio, como una pantalla viva. */
body.v-congelada::before { animation: grid-drift 90s linear infinite; }
@keyframes grid-drift { to { background-position: 64px 64px; } }

/* Portada: un cursor arrastra el marco de la esquina superior izquierda a la inferior derecha. */
.cursor-ghost { position: absolute; left: 0; top: 0; width: 26px; height: 26px; color: #fff; opacity: 0; pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .6)); transform: translate(-13px, -13px); }
.cursor-ghost svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.js .hero-stage.is-captured .cursor-ghost { animation: drag-cursor 1.5s var(--ease-out) forwards; }
@keyframes drag-cursor {
  0% { opacity: 0; transform: translate(-13px, -13px); }
  8% { opacity: 1; }
  75% { opacity: 1; transform: translate(calc(var(--to-x, 1000px) - 13px), calc(var(--to-y, 470px) - 13px)); }
  100% { opacity: 0; transform: translate(calc(var(--to-x, 1000px) - 13px), calc(var(--to-y, 470px) - 13px)); }
}

/* Después del marco: entran las herramientas, la barra de acciones y la captura ya lista. */
.js .toolbar, .js .actionbar { opacity: 0; }
.js .toolbar { transform: translateX(18px); }
.js .actionbar { transform: translateY(12px); }
.js .hero-stage.is-captured .toolbar { animation: slide-in .6s var(--ease-out) 1.15s forwards; }
.js .hero-stage.is-captured .actionbar { animation: slide-in .5s var(--ease-out) 1.35s forwards; }
@keyframes slide-in { to { opacity: 1; transform: none; } }
.js .hero-result { opacity: 0; transform: translateY(34px) scale(.96); }
.js .hero-selection.is-captured .hero-result { animation: land .8s var(--ease-out) 1.25s forwards; }
@keyframes land { to { opacity: 1; transform: none; } }
.js .hero-selection .hero-copy > * { opacity: 0; transform: translateY(14px); }
.js .hero-selection.is-captured .hero-copy > * { animation: slide-in .7s var(--ease-out) forwards; }
.js .hero-selection.is-captured .hero-copy > :nth-child(1) { animation-delay: .35s; }
.js .hero-selection.is-captured .hero-copy > :nth-child(2) { animation-delay: .5s; }
.js .hero-selection.is-captured .hero-copy > :nth-child(3) { animation-delay: .65s; }
.toolbar .tool { transition: background .2s, transform .2s var(--ease-out); }
.toolbar .tool:hover { background: rgba(255, 255, 255, .12); transform: scale(1.08); }

/* Bloques que entran al llegar a la vista. */
.js [data-reveal="up"], .js [data-reveal="drop"] { opacity: 0; transform: translateY(22px); transition: opacity .6s linear, transform .9s var(--ease-out); transition-delay: var(--d, 0s); }
.js [data-reveal="drop"] { transform: translateY(40px) rotate(0deg) scale(.97); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="stagger"] > li { opacity: 0; transform: translateX(-14px); transition: opacity .5s linear, transform .7s var(--ease-out); }
.js [data-reveal="stagger"].is-in > li { opacity: 1; transform: none; }
.js [data-reveal="stagger"].is-in > li:nth-child(1) { transition-delay: .35s; } .js [data-reveal="stagger"].is-in > li:nth-child(2) { transition-delay: .5s; }
.js [data-reveal="stagger"].is-in > li:nth-child(3) { transition-delay: .65s; } .js [data-reveal="stagger"].is-in > li:nth-child(4) { transition-delay: .8s; }
.js [data-reveal="stagger"].is-in > li:nth-child(5) { transition-delay: .95s; } .js [data-reveal="stagger"].is-in > li:nth-child(6) { transition-delay: 1.1s; }

/* Las teclas ⌘ 2 se presionan de verdad. */
.js [data-reveal="keys"] { opacity: 0; transform: translateY(16px); transition: opacity .5s linear, transform .8s var(--ease-out); }
.js [data-reveal="keys"].is-in { opacity: 1; transform: none; }
.js [data-reveal="keys"].is-in .keycap { animation: key-press .45s ease-in-out .55s both; }
.js [data-reveal="keys"].is-in .keycap + .keycap { animation-delay: .75s; }
@keyframes key-press { 40% { transform: translateY(.09em); box-shadow: 0 0 0 #060d0c, inset 0 0 0 1px rgba(255, 255, 255, .14); background: #2fa84f; } }

/* "Copiado al portapapeles": el aviso de la app, tal cual. */
.result { position: relative; }
.toast { position: absolute; left: 50%; bottom: 58px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px;
  background: rgba(26, 26, 26, .94); color: #fff; font-size: 14px; font-weight: 500; white-space: nowrap;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5); transform: translate(-50%, 16px); opacity: 0; }
.js .result.is-in .toast { animation: toast-in .5s var(--ease-out) 1.1s forwards; }
@keyframes toast-in { to { opacity: 1; transform: translate(-50%, 0); } }
.result:hover .toast { opacity: 1; transform: translate(-50%, 0); }

/* La descarga: el botón respira una sola vez cuando el marco termina de dibujarse. */
.js .cta-selection .button { opacity: 0; transform: translateY(10px); }
.js .cta-selection.is-captured .button { animation: slide-in .6s var(--ease-out) .9s forwards; }
.button-green:not(.is-disabled):hover { transform: translateY(-2px); }

@media (max-width: 899px) {
  .cursor-ghost { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.v-congelada::before { animation: none; }
  .js .toolbar, .js .actionbar, .js .hero-result, .js .hero-selection .hero-copy > *, .js [data-reveal], .js [data-reveal="stagger"] > li,
  .js .cta-selection .button, .toast { opacity: 1; transform: none; animation: none; transition: none; }
  .js [data-reveal="keys"].is-in .keycap { animation: none; }
  .toast { transform: translate(-50%, 0); }
}

/* ── Páginas legales ──────────────────────────────────────────────── */
.legal-main { padding: 40px 48px 110px; }
.legal-body { max-width: 68ch; margin: 0 auto; }
.legal-body h1 { font-size: clamp(2rem, 4vw, 2.9rem); letter-spacing: -.02em; }
.legal-updated { margin-top: 14px; font-size: 13px; color: rgba(242, 245, 242, .55); }
.legal-body h2 { font-size: 1.25rem; margin-top: 44px; letter-spacing: -.01em; }
.legal-body p, .legal-body li { margin-top: 12px; font-size: 1rem; line-height: 1.65; color: var(--paper-soft); }
.legal-body p:first-of-type { margin-top: 26px; font-size: 1.0625rem; color: var(--paper); }
.legal-body b { color: var(--paper); font-weight: 600; }
.legal-body ul { padding-left: 22px; }
.legal-body a { color: var(--leaf-bright); }
@media (max-width: 899px) { .legal-main { padding: 24px 22px 80px; } }