/* Legal pages (/terminos, /privacidad, /reembolsos) and the post-purchase page (/gracias). Same tokens and
   glass style as index.html, without the animation libraries: long-form text in a ~720px column. */

/* ===== tokens: copied from index.html ===== */
:root{
  --bg:#07070a; --bg-2:#0c0c11; --glass:rgba(22,22,28,.55); --glass-2:rgba(255,255,255,.045);
  --stroke:rgba(255,255,255,.08); --stroke-2:rgba(255,255,255,.16);
  --text:#f2f2f5; --muted:#9a9aa6; --faint:#5d5d69;
  --accent:#36e0c3; --accent-2:#ffa000; --accent-ink:#04110e;
  --a1:#ffa000; --a2:#00e0d0; --a3:#0050ff;
  --r-xl:32px; --r-lg:22px; --r-md:16px; --r-sm:12px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --wrap:1200px; --gutter:clamp(16px,4vw,40px);
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:-apple-system,"SF Pro Display",BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --body:#c9c9d2;      /* long-form paragraphs: between --text and --muted */
  --col:720px;
}
*{box-sizing:border-box}
html{background:var(--bg);color-scheme:dark;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--text);color:#000;padding:10px 14px;border-radius:10px;font-weight:600}
.skip:focus{top:12px}
.wrap{width:min(100% - 2*var(--gutter),var(--wrap));margin-inline:auto}
.col{width:min(100% - 2*var(--gutter),var(--col));margin-inline:auto}
.micro{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:650}
.glass{background:var(--glass);border:1px solid var(--stroke);-webkit-backdrop-filter:blur(28px) saturate(1.4);backdrop-filter:blur(28px) saturate(1.4);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 24px 70px rgba(0,0,0,.35)}
.grad-text{background:linear-gradient(100deg,var(--a1),var(--a2) 55%,var(--a3));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ambient layers (static here, and dimmer so long text stays readable) */
.aurora-clip{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.aurora{position:absolute;inset:-25%;pointer-events:none;filter:blur(120px) saturate(1.25);opacity:.2}
.aurora i{position:absolute;border-radius:50%}
.aurora .b1{width:46%;height:52%;left:12%;top:-6%;background:var(--a1)}
.aurora .b2{width:42%;height:48%;right:8%;top:10%;background:var(--a2)}
.aurora .b3{width:50%;height:42%;left:30%;bottom:6%;background:var(--a3)}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
main,footer{position:relative;z-index:2;overflow-x:clip}
header{position:relative;z-index:50}

/* ===== buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:52px;padding:0 24px;border-radius:16px;font-weight:650;font-size:15.5px;
  border:1px solid transparent;cursor:pointer;transition:background .25s,border-color .25s,box-shadow .35s;white-space:nowrap}
.btn-pri{background:var(--text);color:#08080b;box-shadow:0 10px 40px -10px color-mix(in srgb,var(--accent) 70%,transparent)}
.btn-pri:hover{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 28%,transparent),0 16px 50px -8px color-mix(in srgb,var(--accent) 80%,transparent)}
.btn-sec{background:var(--glass-2);border-color:var(--stroke);color:var(--text)}
.btn-sec:hover{border-color:var(--stroke-2);background:rgba(255,255,255,.07)}
.btn-sm{height:40px;padding:0 16px;border-radius:12px;font-size:14px}
.btn svg{width:16px;height:16px;flex:none}

/* ===== header ===== */
.nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:50;width:min(100% - 2*var(--gutter),var(--wrap));
  display:flex;align-items:center;gap:12px;padding:8px 8px 8px 16px;border-radius:20px;background:rgba(14,14,19,.72)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;letter-spacing:-.01em}
.brand img{width:28px;height:28px;border-radius:8px}
.nav ul{display:flex;gap:2px;list-style:none;margin:0 auto;padding:0}
.nav ul a{display:block;padding:8px 13px;border-radius:11px;color:var(--muted);font-size:14px;font-weight:550;transition:color .2s,background .2s}
.nav ul a:hover{color:var(--text);background:var(--glass-2)}
.nav ul a[aria-current="page"]{color:var(--text);background:var(--glass-2)}
.beta-pill{font-size:10.5px;font-weight:800;letter-spacing:.08em;padding:3px 7px;border-radius:6px;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent)}

/* ===== page head ===== */
.doc-head{padding:150px 0 0}
.doc-head h1{-webkit-hyphens:none;hyphens:none;overflow-wrap:break-word;font-family:var(--display);font-size:clamp(40px,6.4vw,68px);line-height:1;letter-spacing:-.045em;font-weight:750;margin:16px 0 18px}
.doc-head .lead{font-size:clamp(17px,2vw,19px);color:var(--muted);margin:0 0 24px;line-height:1.55}
.updated{display:inline-flex;align-items:center;gap:9px;padding:7px 14px 7px 10px;border-radius:999px;font-size:13px;font-weight:600;color:var(--muted)}
.updated::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent)}
.updated time{color:var(--text)}
.tr-note{margin:14px 0 0;font-size:13.5px;line-height:1.5;color:var(--muted);max-width:60ch}
.doc-head .lead a,.tldr a,.tr-note a{color:var(--text);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 60%,transparent);text-underline-offset:3px}

/* ===== boxes ===== */
.box{border-radius:var(--r-lg);padding:26px 28px;margin:40px 0 0}
.box h2{margin:0 0 14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:650}
.tldr{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.tldr li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;line-height:1.5}
.tldr svg{width:20px;height:20px;flex:none;color:var(--accent);margin-top:1px}
.toc ol{margin:0;padding:0;list-style:none;columns:2;column-gap:28px;counter-reset:toc}
.toc li{break-inside:avoid;counter-increment:toc}
.toc a{display:flex;gap:10px;padding:7px 0;color:var(--muted);font-size:15px;line-height:1.4;transition:color .2s}
.toc a::before{content:counter(toc,decimal-leading-zero);font:700 12px/1.9 var(--mono);color:var(--accent);flex:none}
.toc a:hover{color:var(--text)}

/* big refund facts */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:40px 0 0}
.fact{padding:22px 20px;border-radius:var(--r-lg)}
.fact b{display:block;white-space:nowrap;font-family:var(--display);font-size:clamp(28px,4vw,40px);letter-spacing:-.04em;line-height:1;font-weight:720;font-variant-numeric:tabular-nums}
.fact span{display:block;color:var(--muted);font-size:13.5px;margin-top:8px;line-height:1.35}

/* ===== long-form ===== */
.prose{padding:24px 0 0;color:var(--body);font-size:16.5px;line-height:1.72}
.prose section{padding-top:48px}
.prose h2{-webkit-hyphens:none;hyphens:none;overflow-wrap:break-word;font-family:var(--display);color:var(--text);font-size:clamp(24px,3vw,30px);line-height:1.15;letter-spacing:-.025em;font-weight:700;margin:0 0 16px;scroll-margin-top:100px}
.prose h2 .n{font:700 13px var(--mono);color:var(--accent);letter-spacing:.08em;display:block;margin-bottom:10px}
.prose h3{color:var(--text);font-size:17.5px;letter-spacing:-.01em;margin:28px 0 8px}
.prose p{margin:0 0 16px}
.prose ul,.prose ol{margin:0 0 16px;padding-left:22px}
.prose li{margin:0 0 8px;padding-left:4px}
.prose li::marker{color:var(--accent)}
.prose strong{color:var(--text);font-weight:650}
.prose a{color:var(--text);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 60%,transparent);text-underline-offset:3px;transition:text-decoration-color .2s}
.prose a:hover{text-decoration-color:var(--accent)}
.prose code{font:500 .86em var(--mono);padding:2px 6px;border-radius:6px;background:var(--glass-2);border:1px solid var(--stroke);color:var(--text);overflow-wrap:anywhere}
.prose dl{margin:0 0 16px;display:grid;gap:2px;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--stroke)}
.prose dl div{display:grid;grid-template-columns:200px 1fr;gap:16px;padding:12px 16px;background:var(--glass-2)}
.prose dt{color:var(--text);font-weight:600;font-size:15px}
.prose dd{margin:0;font-size:15px}
.steps{list-style:none;padding:0!important;counter-reset:st;display:grid;gap:10px}
.steps li{counter-increment:st;display:flex;gap:14px;padding:16px 18px!important;margin:0!important;border-radius:var(--r-md);background:var(--glass-2);border:1px solid var(--stroke)}
.steps li::before{content:counter(st);flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font:700 13px var(--mono);color:var(--accent-ink);background:var(--accent)}
.note{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:14px;background:rgba(0,0,0,.28);border:1px solid var(--stroke);font-size:15px;color:var(--muted);margin:0 0 16px}
.note svg{width:18px;height:18px;flex:none;color:var(--accent-2);margin-top:3px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0 16px}
.prose .cta-row a{text-decoration:none}
.prose .btn-pri{color:#08080b}
/* placeholders the founder must fill before publishing */
mark.ph{background:color-mix(in srgb,var(--accent-2) 16%,transparent);color:#ffc560;border:1px dashed color-mix(in srgb,var(--accent-2) 65%,transparent);padding:0 .35em;border-radius:6px;font-weight:600;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.see-also{margin:56px 0 0;padding:22px 24px;border-radius:var(--r-lg);display:flex;gap:10px 18px;align-items:center;flex-wrap:wrap;font-size:15px;color:var(--muted)}
.see-also a{color:var(--text);font-weight:600}
.see-also a:hover{color:var(--accent)}

/* ===== /gracias/: thank-you and download page (tools/build_gracias.py) ===== */
.thanks .aurora{opacity:.3}
.nav-solo .btn{margin-left:auto}
.ok{display:inline-flex;align-items:center;gap:9px;padding:6px 14px 6px 7px;border-radius:999px;font-size:13.5px;font-weight:650;color:var(--text)}
.ok svg{width:20px;height:20px;padding:4px;border-radius:50%;flex:none;background:var(--accent);color:var(--accent-ink)}
.dl{margin:40px 0 0;padding:26px 28px;border-radius:var(--r-xl)}
.dl-row{display:flex;align-items:center;gap:18px}
.dl-icon{width:64px;height:64px;flex:none;border-radius:15px}
.dl h2{display:flex;align-items:center;gap:10px;margin:0 auto 0 0;font-family:var(--display);font-size:22px;line-height:1.2;letter-spacing:-.02em;font-weight:700;white-space:nowrap}
.reqs{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.reqs li{padding:5px 12px;border-radius:999px;background:var(--glass-2);border:1px solid var(--stroke);color:var(--muted);font-size:13.5px;font-weight:550;line-height:1.4}
.btn-lg{height:58px;padding:0 26px;border-radius:18px;font-size:16.5px}
.btn-lg svg{width:20px;height:20px}
.dl-note{margin:20px 0 0;padding-top:18px;border-top:1px solid var(--stroke);color:var(--muted);font-size:14.5px;line-height:1.5}

/* ===== footer (same as index.html) ===== */
footer{padding:80px 0 50px;margin-top:120px;border-top:1px solid var(--stroke)}
.foot{display:grid;grid-template-columns:minmax(240px,1.4fr) repeat(auto-fit,minmax(150px,1fr));gap:32px}
.foot h4{margin:0 0 14px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.foot ul{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.foot a{color:var(--muted);font-size:14.5px;transition:color .2s}
.foot a:hover,.foot a[aria-current="page"]{color:var(--text)}
.foot p{color:var(--muted);font-size:14.5px;max-width:34ch}
.legal{margin-top:50px;padding-top:24px;border-top:1px solid var(--stroke);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--faint);font-size:12.5px;line-height:1.55}
.legal p{margin:0;max-width:760px}
.langs-foot{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:22px}
.langs-foot a{color:var(--faint);font-size:13px;transition:color .2s}
.langs-foot a:hover,.langs-foot a[aria-current]{color:var(--text)}

/* ===== responsive ===== */
@media (max-width:1020px){
  .foot{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .nav ul{display:none}
  .nav .btn{margin-left:auto}
  .toc ol{columns:1}
  .prose dl div{grid-template-columns:1fr;gap:2px}
}
@media (max-width:640px){
  .doc-head{padding-top:118px}
  .doc-head h1,.prose h2{-webkit-hyphens:manual;hyphens:manual}   /* soft hyphens (&shy;) only where long words would not fit */
  .box{padding:22px 20px}
  .facts{grid-template-columns:1fr}
  .fact{display:flex;align-items:baseline;gap:14px}
  .fact span{margin-top:0}
  .prose{font-size:16px}
  .prose section{padding-top:40px}
  .foot{grid-template-columns:1fr}
  .dl{padding:22px 20px}
  .dl-row{flex-wrap:wrap;gap:16px}
  .dl-icon{width:56px;height:56px}
  .dl .btn-lg{width:100%}
}
@media (max-width:420px){
  .nav .long{display:none}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media print{
  html,body{background:#fff;color:#000}
  .aurora-clip,.grain,header,.skip,.see-also,.foot,.langs-foot{display:none}
  .glass{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-color:#ccc}
  .doc-head{padding-top:0}
  .prose,.prose h2,.prose h3,.prose strong,.prose a,.doc-head .lead,.updated time,.tldr li{color:#000}
  .grad-text{color:#000;background:none}
  footer{margin-top:40px;padding-top:20px}
}