/* VerdelShot — dos estados de una misma pantalla: el escritorio (claro) y la pantalla congelada (oscuro). */
:root {
  --ink: #10261a;
  --ink-soft: rgba(16, 38, 26, .74);
  --leaf: #1e8e3e;
  --leaf-bright: #3ddc63;
  --mist: #dfeee0;
  --night: #0d1f1d;
  --night-deep: #08151a;
  --paper: #f2f5f2;
  --paper-soft: rgba(242, 245, 242, .76);
  --panel: #1c1c1e;
  --red: #e5342e;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --menubar-h: 34px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--menubar-h) + 20px); }
body { margin: 0; font-family: "Sora", system-ui, sans-serif; color: var(--ink); background: var(--night); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
h1, h2 { text-wrap: balance; letter-spacing: -.025em; line-height: 1.05; font-weight: 700; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--leaf-bright); outline-offset: 3px; border-radius: 4px; }
kbd { font: inherit; }

/* ── Barra de menú (navegación del sitio) ─────────────────────────── */
.menubar { position: sticky; top: 0; z-index: 20; height: var(--menubar-h); display: flex; align-items: center; justify-content: space-between;
  padding: 0 18px; font-size: 13px; font-weight: 500; color: var(--ink);
  background: rgba(255, 255, 255, .62); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 .5px 0 rgba(16, 38, 26, .18); }
.menubar-left { display: flex; gap: 18px; align-items: center; }
.menubar a { text-decoration: none; color: var(--ink-soft); padding: 4px 2px; }
.menubar a:hover { color: var(--ink); }
.menubar .brand { font-weight: 700; color: var(--ink); }
.menubar-right { display: flex; gap: 14px; align-items: center; color: var(--ink-soft); }
.lang { font-size: 12px; }
.lang [aria-current] { color: var(--ink); font-weight: 600; }
.clock { font-variant-numeric: tabular-nums; min-width: 9.5em; text-align: right; }
.leaf-button { width: 30px; height: 24px; display: grid; place-items: center; border: 0; border-radius: 5px; background: transparent; cursor: pointer; padding: 0; }
.leaf-button:hover, .leaf-button[aria-expanded="true"] { background: rgba(16, 38, 26, .13); }

.appmenu { position: absolute; right: 96px; top: calc(var(--menubar-h) + 6px); width: 274px; padding: 6px; border-radius: 10px; font-size: 13.5px; font-weight: 400;
  background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
  box-shadow: 0 18px 50px rgba(16, 38, 26, .24), 0 0 0 .5px rgba(16, 38, 26, .18);
  transform-origin: 80% 0; animation: menu-in .28s var(--ease-out); }
.appmenu[hidden] { display: none; }
.appmenu a { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; border-radius: 6px; color: var(--ink); }
.appmenu a:hover, .appmenu a:focus-visible, .appmenu a.is-active { background: var(--leaf); color: #fff; outline: none; }
.appmenu:hover a.is-active:not(:hover) { background: transparent; color: var(--ink); }
.appmenu kbd { opacity: .6; font-size: 13px; }
.appmenu hr { border: 0; height: 1px; background: rgba(16, 38, 26, .13); margin: 5px 10px; }
.pro-tag { font: 600 10px/1 "Sora", sans-serif; letter-spacing: .04em; font-style: normal; background: var(--ink); color: #fff; border-radius: 4px; padding: 3px 5px; }
@keyframes menu-in { from { opacity: 0; transform: scale(.96) translateY(-6px); } }

/* ── Escritorio ───────────────────────────────────────────────────── */
.desktop { color: var(--ink);
  background: radial-gradient(90% 70% at 85% 100%, #b9e4c2 0%, rgba(185, 228, 194, 0) 60%),
              radial-gradient(70% 60% at 10% 20%, #eaf5ea 0%, rgba(234, 245, 234, 0) 60%),
              linear-gradient(160deg, #dfeee0 0%, #c7e2cc 50%, #8fc79a 100%); }
.hero { position: relative; overflow: hidden; margin-top: calc(var(--menubar-h) * -1); padding: calc(var(--menubar-h) + 96px) 64px 0; min-height: min(100svh, 820px); }
.hero-copy { position: relative; z-index: 2; max-width: 620px; display: grid; gap: 22px; }
.lockup { display: flex; align-items: center; gap: 12px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(2.35rem, 4.6vw, 3.65rem); }
.lead { font-size: 1.125rem; line-height: 1.55; color: var(--ink-soft); max-width: 33em; text-wrap: pretty; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 6px; }
.cta-note { font-size: 13px; color: rgba(16, 38, 26, .66); }
.button { display: inline-flex; align-items: center; font-weight: 600; font-size: 15px; padding: 15px 24px; border-radius: 12px; text-decoration: none;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.button-ink { background: var(--ink); color: #fff; box-shadow: 0 10px 24px rgba(16, 38, 26, .28); }
.button-ink:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(16, 38, 26, .32); }
.button-green { background: var(--leaf-bright); color: var(--night-deep); }
.button.is-disabled { cursor: default; }
.hero-shot { position: relative; z-index: 1; width: min(900px, 72vw); margin: 56px -120px -8% auto; border-radius: 14px;
  box-shadow: 0 -10px 60px rgba(16, 38, 26, .3), 0 0 0 1px rgba(16, 38, 26, .16); }

/* ── Pantalla congelada ───────────────────────────────────────────── */
.frozen { position: relative; color: var(--paper);
  background: radial-gradient(120% 90% at 20% 0%, #183a33 0%, var(--night) 55%, var(--night-deep) 100%); }
.frozen::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  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; }
.frozen-inner { position: relative; max-width: 1180px; margin: 0 auto; padding: 120px 48px 110px; }
.frozen h2, .plans h2 { font-size: clamp(1.9rem, 3.5vw, 2.85rem); max-width: 20em; }
.section-lead { margin-top: 18px; font-size: 1.0625rem; line-height: 1.6; max-width: 38em; text-wrap: pretty; }
.frozen .section-lead { color: var(--paper-soft); }
.plans .section-lead { color: var(--ink-soft); }

.keycap { display: inline-grid; place-items: center; min-width: 1.35em; height: 1.35em; padding: 0 .28em; margin: 0 .08em; vertical-align: .08em;
  font-size: .78em; font-weight: 600; letter-spacing: 0; border-radius: .28em; color: var(--paper);
  background: linear-gradient(#2c3b38, #1b2725); box-shadow: 0 .09em 0 #060d0c, inset 0 0 0 1px rgba(255, 255, 255, .14); }

.capture { margin-top: 64px; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.selection { position: relative; border: 2px dashed var(--leaf-bright); padding: 14px; }
.size-label { position: absolute; left: -2px; top: -38px; padding: 5px 10px; border-radius: 6px; background: var(--panel); color: #fff;
  font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.handle { position: absolute; width: 10px; height: 10px; background: var(--night); border: 2px solid var(--leaf-bright); }
.handle.tl { left: -6px; top: -6px; } .handle.tc { left: calc(50% - 5px); top: -6px; } .handle.tr { right: -6px; top: -6px; }
.handle.ml { left: -6px; top: calc(50% - 5px); } .handle.mr { right: -6px; top: calc(50% - 5px); }
.handle.bl { left: -6px; bottom: -6px; } .handle.bc { left: calc(50% - 5px); bottom: -6px; } .handle.br { right: -6px; bottom: -6px; }

.annotated { position: relative; }
.annotated img { border-radius: 6px; }
.stamp, .legend li::before { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--leaf-bright); color: var(--night-deep); font-weight: 700; font-size: 14px; box-shadow: 0 0 0 2px var(--night-deep), 0 6px 14px rgba(0, 0, 0, .45); }
.stamp { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); }
.legend { list-style: none; padding: 0; display: grid; gap: 22px; counter-reset: paso; }
.legend li { counter-increment: paso; position: relative; padding-left: 46px; font-size: .9875rem; line-height: 1.55; color: var(--paper-soft); }
.legend li::before { content: counter(paso); position: absolute; left: 0; top: -2px; box-shadow: none; }
.legend b { color: var(--paper); font-weight: 600; }
.legend kbd, .facts kbd { font-size: .92em; padding: 1px 6px; border-radius: 5px; background: rgba(255, 255, 255, .1); color: var(--paper); }

/* El momento de la página: el marco se "dibuja" desde la esquina, como al arrastrar. */
.js .selection { clip-path: inset(0 100% 100% 0); opacity: .2; }
.js .selection.is-captured { clip-path: inset(-60px -20px -160px -20px); opacity: 1; transition: clip-path 1.1s var(--ease-out), opacity .5s linear; }
.js .selection .stamp { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
.js .selection.is-captured .stamp { opacity: 1; transform: translate(-50%, -50%) scale(1); transition: transform .5s var(--ease-out), opacity .3s linear; transition-delay: calc(.7s + var(--i, 0) * 90ms); }

.pasted .frozen-inner { padding-top: 40px; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 64px; align-items: center; }
.facts { list-style: none; padding: 0; margin-top: 34px; display: grid; gap: 16px; font-size: .9875rem; line-height: 1.55; color: var(--paper-soft); max-width: 34em; }
.facts li { padding-left: 22px; position: relative; }
.facts li::before { content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 9px; border: 2px solid var(--leaf-bright); }
.facts b { color: var(--paper); font-weight: 600; }
.result img { border-radius: 8px; box-shadow: 0 30px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08); transform: rotate(-1.2deg); }
.result figcaption { margin-top: 22px; font-size: 13px; color: rgba(242, 245, 242, .62); }

/* ── Gratis y Pro: dos menús ──────────────────────────────────────── */
.plans-inner { max-width: 1180px; margin: 0 auto; padding: 120px 48px 0; }
.menus { margin-top: 56px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: start; }
.bigmenu { padding: 8px; border-radius: 14px; background: rgba(255, 255, 255, .84); -webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);
  box-shadow: 0 24px 60px rgba(16, 38, 26, .2), 0 0 0 .5px rgba(16, 38, 26, .18); }
.bigmenu header { padding: 16px 16px 14px; }
.bigmenu h3 { font-size: 1.5rem; letter-spacing: -.02em; display: flex; justify-content: space-between; align-items: baseline; }
.bigmenu h3 span { font-size: 1.5rem; }
.bigmenu header p { margin-top: 4px; font-size: 13px; color: var(--ink-soft); }
.bigmenu ul { list-style: none; padding: 0; border-top: 1px solid rgba(16, 38, 26, .13); padding-top: 6px; }
.bigmenu li { padding: 9px 16px; border-radius: 7px; font-size: .9375rem; line-height: 1.4; }
.bigmenu li:hover { background: var(--leaf); color: #fff; }
.bigmenu.is-pro { background: var(--ink); color: var(--paper); box-shadow: 0 24px 60px rgba(16, 38, 26, .38); }
.bigmenu.is-pro header p { color: var(--paper-soft); }
.bigmenu.is-pro h3 span { color: var(--leaf-bright); }
.bigmenu.is-pro ul { border-color: rgba(255, 255, 255, .14); }
.bigmenu.is-pro li:first-child { color: var(--paper-soft); }
.bigmenu.is-pro li:hover { background: var(--leaf-bright); color: var(--night-deep); }
.bigmenu footer { margin: 6px 0 0; padding: 14px 16px 12px; border-top: 1px solid rgba(255, 255, 255, .14); font-size: 13px; line-height: 1.5; color: var(--paper-soft); }
.plan-buy { display: flex; justify-content: center; margin-top: 14px; padding: 12px 20px; font-size: 14px; }
.mini-stamps { display: inline-flex; gap: 3px; vertical-align: -.2em; margin-left: 2px; }
.mini-stamps i { display: inline-grid; place-items: center; width: 1.35em; height: 1.35em; border-radius: 50%; background: var(--red); color: #fff; font: 700 .72em/1 "Sora", sans-serif; font-style: normal; }
.settings-shot { width: min(920px, 100%); margin: 72px auto -120px; position: relative; z-index: 2; border-radius: 12px;
  box-shadow: 0 30px 70px rgba(16, 38, 26, .4), 0 0 0 1px rgba(16, 38, 26, .2); }

/* ── Descargar ────────────────────────────────────────────────────── */
.download .frozen-inner { padding: 250px 48px 140px; }
.cta-selection { max-width: 760px; margin: 0 auto; padding: 56px 48px 60px; display: grid; gap: 20px; justify-items: start; }
.cta-selection h2 { font-size: clamp(2rem, 4vw, 3.1rem); }
.cta-selection p { font-size: 1.0625rem; line-height: 1.6; color: var(--paper-soft); max-width: 32em; }
.cta-selection b { color: var(--paper); font-weight: 600; }
.cta-selection .button { margin-top: 8px; }

.site-footer { background: var(--night-deep); color: rgba(242, 245, 242, .66); font-size: 13px; padding: 28px 48px 36px; display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: space-between; align-items: center; }
.site-footer p:first-child { display: flex; align-items: center; gap: 8px; }
.site-footer b { color: var(--paper); font-weight: 600; }
.site-footer a { text-underline-offset: 3px; }
.site-footer a:hover { color: var(--paper); }

/* ── Pantallas angostas ───────────────────────────────────────────── */
@media (max-width: 899px) {
  .menubar { padding: 0 12px; }
  .menubar-left a:not(.brand), .clock { display: none; }
  .appmenu { right: 10px; width: min(290px, calc(100vw - 20px)); }
  .hero { padding: calc(var(--menubar-h) + 56px) 22px 0; min-height: 0; }
  .hero-shot { width: 118%; max-width: none; margin: 44px -14% -6% 2%; }
  .frozen-inner { padding: 88px 22px 80px; }
  .capture, .split, .menus { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .capture { margin-top: 56px; }
  .selection { padding: 8px; }
  .stamp { width: 22px; height: 22px; font-size: 11.5px; }
  .pasted .frozen-inner { padding-top: 16px; }
  .result img { transform: none; }
  .plans-inner { padding: 88px 22px 0; }
  .menus { gap: 22px; margin-top: 44px; }
  .settings-shot { margin: 56px auto -70px; }
  .download .frozen-inner { padding: 150px 22px 96px; }
  .cta-selection { padding: 36px 22px 40px; }
  .site-footer { padding: 24px 22px 32px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .selection { clip-path: none; opacity: 1; transition: none; }
  .js .selection .stamp { opacity: 1; transform: translate(-50%, -50%); transition: none; }
  .appmenu { animation: none; }
  .button { transition: none; }
}