:root{color-scheme:light;box-sizing:border-box}
html{scroll-padding-top:0px}
body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#faf9f5;color:#141413}
body.no-scroll{overflow:hidden;}
img{max-width:100%}

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-body:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono','SFMono-Regular',Consolas,monospace;

  --paper:#FAF7F1;
  --paper-raised:#FFFFFF;
  --ink:#221A33;
  --ink-soft:#5C5270;
  --line:#E6DEF0;
  --line-strong:#CBBBE0;

  --violet:#5B2A96;
  --violet-soft:#7C4BB8;
  --violet-tint:#F3E8FB;

  --gold:#8A5F09;
  --gold-tint:#FCEFD9;

  --green:#1E7A4C;
  --green-tint:#E3F3EC;

  --red:#A23636;
  --red-tint:#FBEAEA;

  --violet-deep:#3B1568;
  --on-band:#F3E8FB;
  --on-band-muted:#D9C4EF;
  --on-band-gold:#FFC107;

  --shadow:0 1px 2px rgba(34,26,51,.07),0 10px 28px rgba(34,26,51,.07);
  --radius:14px;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#150F1E;
    --paper-raised:#1E1730;
    --ink:#EFE9F7;
    --ink-soft:#B7A9D1;
    --line:#352A49;
    --line-strong:#4B3B69;

    --violet:#C0A3E6;
    --violet-soft:#9A78CC;
    --violet-tint:#291F40;

    --gold:#E8B23D;
    --gold-tint:#3A2C13;

    --green:#57D19E;
    --green-tint:#153223;

    --red:#E88686;
    --red-tint:#3A1B1B;

    --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 28px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --paper:#150F1E;
  --paper-raised:#1E1730;
  --ink:#EFE9F7;
  --ink-soft:#B7A9D1;
  --line:#352A49;
  --line-strong:#4B3B69;

  --violet:#C0A3E6;
  --violet-soft:#9A78CC;
  --violet-tint:#291F40;

  --gold:#E8B23D;
  --gold-tint:#3A2C13;

  --green:#57D19E;
  --green-tint:#153223;

  --red:#E88686;
  --red-tint:#3A1B1B;

  --shadow:0 1px 2px rgba(0,0,0,.5),0 10px 28px rgba(0,0,0,.4);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--violet-tint);color:var(--violet);}
a{color:var(--violet);}
h1,h2,h3,h4{font-family:var(--font-display);text-wrap:balance;color:var(--ink);margin:0;}
code,.mono{font-family:var(--font-mono);}
img{max-width:100%;}

.page{max-width:1180px;margin:0 auto;padding-inline:20px;}

/* ---------- HERO ---------- */
.hero{
  background:var(--violet-deep);
  color:var(--on-band);
  padding-block:44px 40px;
  border-bottom:1px solid var(--line-strong);
}
.hero-inner{max-width:1180px;margin:0 auto;padding-inline:20px;display:flex;flex-direction:column;gap:18px;}
.hero-top{display:flex;gap:36px;align-items:stretch;justify-content:space-between;flex-wrap:wrap;}
.hero-copy{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;gap:18px;}
.hero-media-col{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:12px;}
.hero-media{display:flex;flex-direction:row;align-items:stretch;justify-content:center;gap:0;}
.hero-flag-badge{align-items:center;white-space:nowrap;}
.flag-pe{border-radius:2px;flex-shrink:0;}
.hero-image-wrap{flex:0 0 auto;min-height:0;display:flex;align-items:center;justify-content:center;}
.hero-image-wrap + .hero-image-wrap{margin-left:-50px;}
.hero-media img{
  max-height:100%;width:auto;max-width:210px;display:block;
  filter:drop-shadow(0 22px 44px rgba(0,0,0,.45));
}
.hero-title-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:clamp(2.1rem,5vw,3.4rem);}
.hero-logo{
  width:1em;height:1em;border-radius:22%;flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.hero-title{font-size:clamp(2.1rem,5vw,3.4rem);font-weight:600;line-height:1.05;}
.hero-title .pago{color:var(--on-band-gold);}
.hero-tagline{max-width:none;font-size:1.05rem;color:var(--on-band-muted);}
.hero-highlight{color:var(--on-band-gold);font-weight:600;}
.hero-facts{
  display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;
}
.fact.fact-download{
  background:var(--on-band-gold);border-color:transparent;
  color:var(--violet-deep);text-decoration:none;font-weight:600;
}
.fact.fact-download:hover{background:#ffd23f;}
.fact.fact-download .js-version{color:inherit;}
.fact{
  display:flex;align-items:baseline;gap:7px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  padding:7px 14px;
  font-size:13px;
}
.fact b{font-family:var(--font-mono);color:var(--on-band);font-weight:600;}
.fact span{color:var(--on-band-muted);}
a.fact{color:var(--on-band);text-decoration:none;}
a.fact:hover{background:rgba(255,255,255,.14);}

@media (max-width:640px){
  .hero-media{margin-inline:auto;}
  .hero-image-wrap + .hero-image-wrap{margin-left:-28px;}
  .hero-media img{max-width:130px;}
}

/* ---------- LAYOUT ---------- */
.layout{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:48px;
  padding-block:40px 80px;
  align-items:start;
}
@media (max-width:900px){
  .layout{grid-template-columns:1fr;gap:24px;}
}

nav.toc{
  position:sticky;top:20px;
  display:flex;flex-direction:column;gap:2px;
  max-height:calc(100vh - 40px);
  overflow-y:auto;
  padding-right:6px;
}
nav.toc .toc-group-label{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);margin:16px 0 4px;
}
nav.toc .toc-group-label:first-child{margin-top:0;}
nav.toc a{
  color:var(--ink-soft);text-decoration:none;font-size:14px;
  padding:6px 10px;border-radius:8px;border-left:2px solid transparent;
}
nav.toc a:hover{background:var(--violet-tint);color:var(--violet);}

.toc-close{display:none;}

.mobile-topbar{
  display:none;
  position:fixed;top:0;left:0;right:0;z-index:150;
  background:var(--violet-deep);border-bottom:1px solid var(--line-strong);
  padding:12px 70px 12px 20px;
  align-items:center;gap:10px;
}
.mobile-topbar-logo{width:28px;height:28px;border-radius:8px;flex-shrink:0;}
.mobile-topbar-title{
  font-family:var(--font-display);font-weight:600;font-size:1.3rem;color:var(--on-band);
}
.mobile-topbar-title .pago{color:var(--on-band-gold);}

.menu-toggle{
  display:none;
  position:fixed;top:13px;right:16px;z-index:220;
  width:44px;height:44px;border-radius:10px;border:1px solid rgba(255,255,255,.18);
  background:var(--violet-deep);
  flex-direction:column;align-items:center;justify-content:center;gap:4px;
  cursor:pointer;padding:0;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.menu-toggle span{display:block;width:20px;height:2px;background:var(--on-band);border-radius:2px;}

.toc-backdrop{
  position:fixed;inset:0;background:rgba(20,15,30,.5);
  opacity:0;pointer-events:none;transition:opacity .2s ease;
  z-index:205;
}
.toc-backdrop.open{opacity:1;pointer-events:auto;}

@media (max-width:900px){
  .mobile-topbar{display:flex;}
  .menu-toggle{display:flex;}
  body{padding-top:58px;}

  .hero-title-row{display:none;}
  .hero{padding-block:8px 32px;}
  .hero-top{justify-content:center;}
  .hero-media-col{margin-inline:auto;}

  nav.toc{
    position:fixed;top:0;right:0;bottom:0;
    width:280px;max-width:80vw;max-height:none;
    background:var(--paper-raised);border-left:1px solid var(--line);
    padding:70px 20px 24px;
    transform:translateX(100%);
    transition:transform .25s ease;
    z-index:210;
    box-shadow:-8px 0 24px rgba(0,0,0,.2);
  }
  nav.toc.open{transform:translateX(0);}

  .toc-close{
    display:block;position:absolute;top:16px;right:16px;
    width:34px;height:34px;border:none;border-radius:8px;background:var(--violet-tint);
    color:var(--violet);font-size:16px;cursor:pointer;
  }

  nav.toc a{font-size:15px;padding:10px 10px;}
}

main{min-width:0;display:flex;flex-direction:column;gap:64px;}
section{scroll-margin-top:20px;display:flex;flex-direction:column;gap:18px;}
.section-eyebrow{
  font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--violet);
}
h2.section-title{font-size:clamp(1.5rem,3vw,2rem);font-weight:600;}
h3.subhead{font-family:var(--font-body);font-size:1.05rem;}
.section-lede{max-width:none;color:var(--ink-soft);font-size:1.02rem;}

p{max-width:none;}
p.muted{color:var(--ink-soft);}
.full{max-width:none;}

/* ---------- CARDS / GRID ---------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;}
.card{
  background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px 20px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:8px;
}
.card h3{font-size:1.02rem;font-weight:600;font-family:var(--font-body);}
.card p{margin:0;color:var(--ink-soft);font-size:.94rem;max-width:none;}
.card .icon{font-size:1.4rem;}

/* ---------- STEPS ---------- */
.steps{display:flex;flex-direction:column;gap:0;border-left:2px solid var(--line);margin-left:14px;}
.step{position:relative;padding:0 0 30px 30px;}
.step:last-child{padding-bottom:2px;}
.step::before{
  content:attr(data-n);
  position:absolute;left:-14px;top:0;
  width:27px;height:27px;border-radius:50%;
  background:var(--violet);color:var(--paper-raised);
  font-family:var(--font-mono);font-size:12.5px;font-weight:600;
  display:flex;align-items:center;justify-content:center;
}
.step h4{font-size:1rem;font-weight:600;font-family:var(--font-body);margin-bottom:6px;}
.step p{color:var(--ink-soft);font-size:.95rem;}

/* ---------- CALLOUTS ---------- */
.callout{
  border-radius:var(--radius);padding:15px 18px;font-size:.93rem;max-width:none;
  display:flex;gap:12px;border:1px solid var(--line);
}
.callout .tag{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  flex-shrink:0;padding:3px 9px;border-radius:6px;height:fit-content;
}
.callout p, .callout ul{margin:0;color:var(--ink-soft);max-width:none;}

@media (max-width:640px){
  .callout{flex-direction:column;gap:8px;}
}
.callout.tip{background:var(--green-tint);border-color:var(--green);}
.callout.tip .tag{background:var(--green);color:var(--paper-raised);}
.callout.warn{background:var(--gold-tint);border-color:var(--gold);}
.callout.warn .tag{background:var(--gold);color:var(--paper-raised);}
.callout.danger{background:var(--red-tint);border-color:var(--red);}
.callout.danger .tag{background:var(--red);color:var(--paper-raised);}
.callout.info{background:var(--violet-tint);border-color:var(--violet);}
.callout.info .tag{background:var(--violet);color:var(--paper-raised);}

/* ---------- TABLE ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);}
table{border-collapse:collapse;width:100%;font-size:.92rem;background:var(--paper-raised);}
th,td{text-align:left;padding:10px 16px;border-bottom:1px solid var(--line);vertical-align:top;}
thead th{
  font-family:var(--font-mono);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-soft);background:var(--violet-tint);white-space:nowrap;
}
tbody tr:last-child td{border-bottom:none;}
td.mono, th.mono{font-family:var(--font-mono);font-size:.86rem;}

/* ---------- BADGE / PILL ---------- */
.pill{
  display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);
  font-size:11.5px;letter-spacing:.03em;padding:2px 9px;border-radius:999px;
  border:1px solid var(--line-strong);color:var(--ink-soft);
}
h3 .pill{margin-left:6px;}
.pill.principal{background:var(--violet-tint);color:var(--violet);border-color:transparent;}
.pill.satelite{background:var(--gold-tint);color:var(--gold);border-color:transparent;}

/* ---------- FAQ / GLOSSARY ---------- */
details.faq{
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper-raised);
  padding:0;box-shadow:var(--shadow);
}
details.faq summary{
  cursor:pointer;padding:14px 18px;font-weight:600;list-style:none;
  display:flex;justify-content:space-between;align-items:center;gap:10px;
}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary::after{content:'+';font-family:var(--font-mono);color:var(--violet);font-size:1.2rem;}
details.faq[open] summary::after{content:'–';}
details.faq .faq-body{padding:0 18px 16px;color:var(--ink-soft);font-size:.94rem;}
.faq-list{display:flex;flex-direction:column;gap:8px;}

dl.glossary{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:5px 20px;}
dl.glossary dt{font-family:var(--font-mono);font-weight:600;color:var(--violet);white-space:nowrap;padding-top:6px;}
dl.glossary dd{margin:0;padding-top:6px;color:var(--ink-soft);border-top:1px solid var(--line);padding-bottom:6px;}
dl.glossary dt{border-top:1px solid var(--line);padding-top:6px;}
dl.glossary dt:first-of-type, dl.glossary dd:first-of-type{border-top:none;}

@media (max-width:640px){
  dl.glossary{grid-template-columns:1fr;}
  dl.glossary dt{white-space:normal;}
  dl.glossary dd{border-top:none;padding-top:2px;padding-bottom:12px;}
}

/* ---------- MISC ---------- */
ul.plain{margin:0;padding-left:1.1em;color:var(--ink-soft);}
ul.plain li{margin-bottom:5px;}
ul.plain.full{max-width:68ch;}

.whatsapp-float{
  position:fixed;right:20px;bottom:20px;z-index:100;
  display:inline-flex;align-items:center;gap:8px;
  background:#25D366;color:#fff;text-decoration:none;
  font-family:var(--font-body);font-weight:600;font-size:14px;
  border-radius:999px;padding:12px 20px;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.whatsapp-float-icon{font-size:18px;}
.whatsapp-float:hover{background:#1ebe5a;}

.trial-float{
  position:fixed;right:20px;bottom:76px;z-index:100;
  display:inline-flex;align-items:center;
  background:var(--gold);color:var(--paper-raised);text-decoration:none;
  font-family:var(--font-mono);font-weight:600;font-size:13px;letter-spacing:.02em;
  border-radius:999px;padding:9px 18px;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.trial-float:hover{background:var(--gold-tint);color:var(--gold);}
@media (max-width:600px){
  .whatsapp-float{right:14px;bottom:14px;padding:12px 16px;font-size:13px;}
  .trial-float{right:14px;bottom:70px;padding:9px 14px;font-size:12px;}
}

.draft-banner{
  background:var(--gold-tint);color:var(--gold);border-bottom:1px solid var(--line-strong);
  font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-align:center;
  padding:7px 12px;
}

footer{
  border-top:1px solid var(--line);padding-block:26px 150px;
  color:var(--ink-soft);font-size:.85rem;display:flex;flex-direction:column;gap:10px;
}
.footer-row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.footer-copyright{font-size:.8rem;color:var(--ink-soft);opacity:.75;}

@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} }