:root {
  color-scheme: light dark;
  --bg: #fbfaf7;
  --surface: #ffffff;
  --text: #1b1d22;
  --muted: #5b6070;
  --line: #e3e1da;
  --accent: #1f5fbf;
  --accent-text: #ffffff;
  --mark: #ccdbf5;
  --paper: #ffffff;
  --paper-line: #e6e8ee;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161b;
    --surface: #1c1f26;
    --text: #e9eaee;
    --muted: #a3a8b6;
    --line: #2c3039;
    --accent: #6f9ef0;
    --accent-text: #0d1424;
    --mark: #2b3c5c;
    --paper: #f4f4f1;
    --paper-line: #dadde4;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
}
a { color: var(--accent); }
.wrap { max-width: 64rem; margin: 0 auto; padding: 0 1rem; }

header.top { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 0; }
.brand { display: flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.1rem; color: var(--text); text-decoration: none; }
.brand img { width: 2.4rem; height: auto; }
nav a { color: var(--muted); text-decoration: none; margin-left: 1.25rem; font-size: .95rem; }
nav a:hover { color: var(--text); }

.hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center; padding: 3rem 0 4rem; }
.hero h1 { font-size: clamp(2rem, 4.5vw, 3rem); line-height: 1.12; margin: 0 0 1rem; letter-spacing: -.01em; }
.hero p.lead { font-size: 1.15rem; color: var(--muted); margin: 0 0 2rem; }
.cta { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.button {
  display: inline-block; padding: .7rem 1.3rem; border-radius: .5rem;
  background: var(--accent); color: var(--accent-text); font-weight: 600; text-decoration: none;
}
.button.secondary { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1.5px var(--accent); }
.note { font-size: .9rem; color: var(--muted); margin-top: 1rem; }

/* The illustration: a page with a signature stamp like the one the app draws. */
.doc {
  position: relative; aspect-ratio: 210 / 260; max-width: 24rem; margin: 0 auto; width: 100%;
  background: var(--paper); border-radius: .4rem; box-shadow: 0 10px 40px rgb(0 0 0 / .14), 0 1px 3px rgb(0 0 0 / .1);
  padding: 12% 11%;
}
.doc .line { height: .55rem; border-radius: .3rem; background: var(--paper-line); margin-bottom: .8rem; }
.doc .line.short { width: 60%; }
.doc .line.title { height: .9rem; width: 45%; margin-bottom: 1.4rem; background: #cfd3dc; }
.stamp {
  position: absolute; left: 11%; right: 11%; bottom: 9%;
  border: 1.5px solid #b3b3b3; padding: .6rem .7rem; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem;
  color: #111; font-family: Helvetica, Arial, sans-serif; overflow: hidden;
}
.stamp img { position: absolute; left: 50%; top: 50%; width: 46%; transform: translate(-50%, -50%); opacity: .35; }
.stamp .name { position: relative; font-size: 1.05rem; line-height: 1.15; align-self: center; }
.stamp .detail { position: relative; font-size: .7rem; line-height: 1.3; }

section { padding: 3.5rem 0; border-top: 1px solid var(--line); }
section h2 { font-size: 1.6rem; margin: 0 0 .5rem; }
section > .wrap > p.intro { color: var(--muted); margin: 0 0 2rem; max-width: 40rem; }

.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; counter-reset: step; }
.steps li { background: var(--surface); border: 1px solid var(--line); border-radius: .6rem; padding: 1.25rem; counter-increment: step; }
.steps li::before {
  content: counter(step); display: inline-grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%;
  background: var(--accent); color: var(--accent-text); font-weight: 700; margin-bottom: .75rem;
}
.steps h3, .features h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.steps p, .features p { margin: 0; color: var(--muted); }

.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem 3rem; }

.downloads { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.download { background: var(--surface); border: 1px solid var(--line); border-radius: .6rem; padding: 1.25rem; }
.download h3 { margin: 0 0 .25rem; }
.download p { margin: 0 0 1rem; color: var(--muted); font-size: .95rem; }
.download.yours { border: 2px solid var(--accent); box-shadow: 0 0 0 4px var(--mark); }
.download .yours-label { display: inline-block; margin: 0 0 .5rem; font-size: .8rem; font-weight: 600; color: var(--accent); }
.download .soon { display: inline-block; font-size: .85rem; font-weight: 600; color: var(--muted); border: 1px dashed var(--line); border-radius: .4rem; padding: .35rem .7rem; }

.faq details { border-bottom: 1px solid var(--line); padding: 1rem 0; }
.faq summary { cursor: pointer; font-weight: 600; }
.faq details p { color: var(--muted); margin: .6rem 0 0; max-width: 46rem; }

/* The certificate guide: one section per OS, reached by anchor from the app. */
.guide-head { padding: 2rem 0 3rem; max-width: 46rem; }
.guide-head h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); line-height: 1.15; margin: 0 0 1rem; }
.guide-head p.lead { font-size: 1.1rem; color: var(--muted); margin: 0 0 1.5rem; }
.os-links { display: flex; flex-wrap: wrap; gap: .75rem; }
section.os:target { background: var(--surface); }
.steps code, .note code { overflow-wrap: anywhere; }
section .note { max-width: 46rem; }

footer { border-top: 1px solid var(--line); padding: 2rem 0 3rem; color: var(--muted); font-size: .9rem; }

/* "Cómo funciona": a looping demo of the app, in sync with the steps beside it.
   Base styles are the final frame, so reduced motion shows a signed document. */
.how { display: grid; grid-template-columns: 1.35fr 1fr; gap: 2rem; align-items: center; }
.steps li { padding: 1rem 1.25rem; }
.steps li::before { margin: 0 .75rem 0 0; float: left; }

.demo {
  --t: 12s;
  position: relative; aspect-ratio: 16 / 10; container-type: inline-size; overflow: hidden;
  background: #e9ebf0; border-radius: .7rem; border: 1px solid var(--line);
  box-shadow: 0 10px 40px rgb(0 0 0 / .12); font-family: system-ui, sans-serif; color: #1b1d22;
}
.demo-bar { position: absolute; inset: 0 0 auto; height: 8%; background: #f6f7f9; border-bottom: 1px solid #d9dce3; display: flex; align-items: center; gap: 1cqw; padding-left: 2cqw; }
.demo-bar i { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: #d3d6dd; }
.demo-bar span { margin-left: 1.5cqw; font-size: 1.8cqw; color: #5b6070; }

.demo-page { position: absolute; left: 8%; top: 13%; width: 40%; height: 82%; background: #fff; box-shadow: 0 1px 4px rgb(0 0 0 / .18); padding: 5cqw 4.5cqw; }
.demo-page .line { height: 1cqw; border-radius: 1cqw; background: #e6e8ee; margin-bottom: 1.6cqw; }
.demo-page .line.short { width: 60%; }
.demo-page .line.title { height: 1.6cqw; width: 45%; margin-bottom: 3cqw; background: #cfd3dc; }

.demo-box { position: absolute; left: 11%; top: 74%; width: 34%; height: 16%; border: 1px solid #b3b3b3; overflow: hidden; }
.demo-stamp { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 1cqw; padding: 0 1.2cqw; }
.demo-stamp img { position: absolute; left: 50%; top: 50%; width: 40%; transform: translate(-50%, -50%); opacity: .3; }
.demo-stamp b { position: relative; font: 400 1.75cqw/1.15 Helvetica, Arial, sans-serif; }
.demo-stamp small { position: relative; font: 1.05cqw/1.3 Helvetica, Arial, sans-serif; }
.demo-controls { position: absolute; left: 11%; top: 67.5%; display: flex; gap: .6cqw; opacity: 0; }
.demo-controls span { background: #fff; border-radius: .6cqw; padding: .4cqw 1cqw; font-size: 1.4cqw; box-shadow: 0 1px 3px rgb(0 0 0 / .25); }
.demo-handle { position: absolute; left: calc(45% - .9cqw); top: calc(90% - .9cqw); width: 1.8cqw; height: 1.8cqw; border-radius: 50%; background: #1f5fbf; border: .3cqw solid #fff; opacity: 0; }

/* The signing panel: four steps, like the app's. */
.demo-panel { position: absolute; left: 53%; top: 13%; width: 43%; height: 82%; background: #f6f7f9; border-radius: .8cqw; }
.demo-step {
  position: absolute; left: 55%; width: 39%; display: flex; align-items: center; gap: 1.2cqw;
  padding: 0 1.4cqw; border: .25cqw solid #e3e1da; border-radius: .9cqw; background: #fff; font-size: 1.75cqw; font-weight: 600;
}
.demo-step.s1 { top: 15%; height: 24%; align-items: start; padding-top: 1.3cqw; }
.demo-step.s2 { top: 41%; height: 15%; align-items: start; padding-top: 1.3cqw; }
.demo-step.s3 { top: 58%; height: 13%; align-items: start; padding-top: 1.3cqw; }
.demo-step.s4 { top: 73%; height: 20%; align-items: start; padding-top: 1.3cqw; }
.demo-step .n, .demo-step .ok {
  display: grid; place-items: center; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; font-size: 1.4cqw; flex: none;
}
.demo-step .n { background: #e9ebf0; }
.demo-step .ok { background: #2da44e; color: #fff; margin-left: -3.8cqw; }
.demo-file-name { position: absolute; left: 61%; top: 49%; font-size: 1.5cqw; color: #5b6070; }
.demo-select { position: absolute; left: 57%; top: 23%; width: 35%; padding: .5cqw 1cqw; border: 1px solid #c9cdd6; border-radius: .5cqw; font-size: 1.3cqw; background: #fff; }
.demo-preview { position: absolute; left: 57%; top: 30.5%; width: 22%; height: 6%; border: 1px solid #b3b3b3; background: #fff; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: .5cqw; padding: 0 .6cqw; font: .9cqw/1.15 Helvetica, Arial, sans-serif; }
.demo-placed { position: absolute; left: 61%; top: 65%; font-size: 1.4cqw; color: #5b6070; }
.demo-button { position: absolute; left: 57%; top: 82%; width: 35%; height: 8%; border-radius: .8cqw; background: #1f5fbf; color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 1.8cqw; }
.demo-done { position: absolute; left: 0; top: 8%; width: 100%; height: 5%; display: flex; align-items: center; padding-left: 2cqw; background: #e3f3e8; color: #1d6b3a; font-size: 1.5cqw; }

.demo-file { position: absolute; left: 6%; top: 14%; width: 6cqw; height: 7.5cqw; background: #fff; border: 1px solid #c9cdd6; border-radius: .5cqw; display: grid; place-items: end center; padding-bottom: .8cqw; font: 700 1.5cqw system-ui, sans-serif; color: #c0392b; box-shadow: 0 2px 6px rgb(0 0 0 / .15); opacity: 0; }
.demo-cursor { position: absolute; left: 74%; top: 86%; width: 2.6cqw; }

@media (prefers-reduced-motion: no-preference) {
  .demo-file      { animation: demo-file var(--t) infinite; }
  .demo-cursor    { animation: demo-cursor var(--t) infinite; }
  .demo-page      { animation: demo-page var(--t) infinite; }
  .demo-file-name { animation: show-32 var(--t) infinite; }
  .demo-select, .demo-preview { animation: show-0 var(--t) infinite; }
  .demo-box       { animation: demo-box var(--t) infinite; }
  .demo-stamp, .demo-placed { animation: show-52 var(--t) infinite; }
  .demo-controls, .demo-handle { animation: demo-controls var(--t) infinite; }
  .demo-button    { animation: demo-button var(--t) infinite; }
  .demo-done      { animation: show-78 var(--t) infinite; }
  .demo-step.s1   { animation: panel-1 var(--t) infinite; }
  .demo-step.s2   { animation: panel-2 var(--t) infinite; }
  .demo-step.s3   { animation: panel-3 var(--t) infinite; }
  .demo-step.s4   { animation: panel-4 var(--t) infinite; }
  .demo-step.s1 .ok { animation: show-12 var(--t) infinite; }
  .demo-step.s2 .ok { animation: show-32 var(--t) infinite; }
  .demo-step.s3 .ok { animation: show-56 var(--t) infinite; }
  .demo-step.s4 .ok { animation: show-78 var(--t) infinite; }
  .how .steps li              { animation: step-1 var(--t, 12s) infinite; }
  .how .steps li:nth-child(2) { animation-name: step-2; }
  .how .steps li:nth-child(3) { animation-name: step-3; }
  .how .steps li:nth-child(4) { animation-name: step-4; }
}

/* 0–14% certificate, 14–34% open, 34–66% place, 66–96% sign, then reset. */
@keyframes demo-cursor {
  0%        { left: 74%; top: 86%; transform: none; }
  8%        { left: 80%; top: 24%; transform: none; }
  10%       { transform: scale(.85); }
  12%       { left: 80%; top: 24%; transform: none; }
  16%       { left: 7%;  top: 18%; }
  30%, 34%  { left: 26%; top: 46%; }
  40%       { left: 11%; top: 74%; }
  52%, 60%  { left: 45%; top: 90%; }
  70%       { left: 74%; top: 86%; transform: none; }
  73%       { transform: scale(.85); }
  76%, 100% { left: 74%; top: 86%; transform: none; }
}
@keyframes demo-file {
  0%, 14%   { left: 4%;  top: 13%; opacity: 0; }
  16%       { left: 4%;  top: 13%; opacity: 1; }
  30%       { left: 23%; top: 41%; opacity: 1; }
  33%, 100% { left: 23%; top: 41%; opacity: 0; }
}
@keyframes demo-page {
  0%, 29%  { opacity: 0; transform: scale(.97); }
  34%, 96% { opacity: 1; transform: none; }
  100%     { opacity: 0; }
}
@keyframes demo-box {
  0%, 40%  { width: 0; height: 0; opacity: 0; border-style: dashed; border-color: #1f5fbf; background: rgb(31 95 191 / .1); }
  41%      { opacity: 1; }
  52%      { width: 34%; height: 16%; border-style: dashed; border-color: #1f5fbf; background: rgb(31 95 191 / .1); }
  74%      { border-style: dashed; border-color: #1f5fbf; background: rgb(31 95 191 / .1); }
  76%, 96% { width: 34%; height: 16%; opacity: 1; border-style: solid; border-color: #b3b3b3; background: transparent; }
  100%     { width: 34%; height: 16%; opacity: 0; }
}
@keyframes demo-controls { 0%, 52% { opacity: 0; } 55%, 74% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes demo-button { 0%, 71%, 75%, 100% { filter: none; } 73% { filter: brightness(.8); } }
@keyframes show-0 { 0%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes show-12 { 0%, 11% { opacity: 0; } 14%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes show-32 { 0%, 31% { opacity: 0; } 34%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes show-52 { 0%, 51% { opacity: 0; } 55%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes show-56 { 0%, 56% { opacity: 0; } 59%, 96% { opacity: 1; } 100% { opacity: 0; } }
@keyframes show-78 { 0%, 77% { opacity: 0; } 80%, 96% { opacity: 1; } 100% { opacity: 0; } }
/* The panel's current step has the accent border; the others are dimmed. */
@keyframes panel-1 { 0%, 12%  { border-color: #1f5fbf; opacity: 1; } 14%, 98% { border-color: #e3e1da; opacity: .7; } 100% { border-color: #1f5fbf; opacity: 1; } }
@keyframes panel-2 { 0%, 12%  { border-color: #e3e1da; opacity: .7; } 14%, 34% { border-color: #1f5fbf; opacity: 1; } 36%, 100% { border-color: #e3e1da; opacity: .7; } }
@keyframes panel-3 { 0%, 34%  { border-color: #e3e1da; opacity: .7; } 36%, 58% { border-color: #1f5fbf; opacity: 1; } 60%, 100% { border-color: #e3e1da; opacity: .7; } }
@keyframes panel-4 { 0%, 58%  { border-color: #e3e1da; opacity: .7; } 60%, 96% { border-color: #1f5fbf; opacity: 1; } 100% { border-color: #e3e1da; opacity: .7; } }
@keyframes step-1 { 0%, 12% { opacity: 1; border-color: var(--accent); } 14%, 98% { opacity: .55; border-color: var(--line); } 100% { opacity: 1; border-color: var(--accent); } }
@keyframes step-2 { 0%, 12% { opacity: .55; border-color: var(--line); } 14%, 34% { opacity: 1; border-color: var(--accent); } 36%, 100% { opacity: .55; border-color: var(--line); } }
@keyframes step-3 { 0%, 34% { opacity: .55; border-color: var(--line); } 36%, 58% { opacity: 1; border-color: var(--accent); } 60%, 100% { opacity: .55; border-color: var(--line); } }
@keyframes step-4 { 0%, 58% { opacity: .55; border-color: var(--line); } 60%, 98% { opacity: 1; border-color: var(--accent); } 100% { opacity: .55; border-color: var(--line); } }

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; gap: 2.5rem; padding-top: 1.5rem; }
  .how, .features, .downloads { grid-template-columns: 1fr; }
  nav { display: none; }
}