@font-face{font-family:Inter;font-weight:100 900;font-display:swap;src:url(/fonts/inter-latin.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:700;font-display:swap;src:url(/fonts/poppins-700.woff2) format("woff2")}
@font-face{font-family:Poppins;font-weight:800;font-display:swap;src:url(/fonts/poppins-800.woff2) format("woff2")}
:root{--turq:#13CDD9;--turq-600:#0FA9B3;--turq-700:#0A7C84;--tinta:#22184a;--tinta-900:#170F35;--tinta-800:#1C1440;--violeta:#8b6af7;--lavanda:#e8e1fd;--lav-050:#F7F4FE;--lav-100:#EFEAFC;--texto:#5A5385;--r:14px;--r-lg:20px;--r-full:999px;--sh:0 4px 12px rgba(34,24,74,.06),0 14px 34px rgba(34,24,74,.09)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font:400 17px/1.7 Inter,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--tinta);background:var(--lav-050);-webkit-font-smoothing:antialiased}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.narrow{max-width:760px;margin:0 auto;padding:0 24px}
/* header */
.hd{background:var(--tinta-900);color:#fff}
.nav{display:flex;align-items:center;justify-content:space-between;height:76px}
.nav img{height:38px;display:block}
.nav .links{display:flex;gap:26px;align-items:center;font:500 15px Inter,sans-serif}
.nav .links a{text-decoration:none;color:#CFC6F5}
.nav .links a:hover{color:#fff}
.btn{display:inline-block;background:var(--turq);color:var(--tinta);font:700 15px Inter,sans-serif;padding:13px 24px;border-radius:var(--r-full);text-decoration:none;box-shadow:0 10px 30px rgba(19,205,217,.32);transition:transform .2s}
.btn:hover{transform:translateY(-2px)}
.btn.sec{background:transparent;color:var(--tinta);box-shadow:none;border:2px solid var(--tinta)}
.hd{position:relative;overflow:hidden}
.hero{padding:44px 0 84px;position:relative}
.hd:after{content:"";position:absolute;right:-200px;top:90px;width:480px;height:480px;border-radius:50%;background:var(--turq);opacity:.95}
.hd .wrap{position:relative;z-index:1}
.crumbs{font:500 14px Inter,sans-serif;color:#CFC6F5;margin-bottom:34px}
.crumbs a{text-decoration:none}.crumbs a:hover{color:#fff}
.pill{display:inline-block;font:700 13px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:8px 16px;border-radius:var(--r-full);background:rgba(255,255,255,.12);margin-bottom:22px}
h1{font:800 clamp(34px,5.4vw,58px)/1.1 Poppins,Inter,sans-serif;letter-spacing:-.025em;max-width:780px}
h1 .hl{background:var(--turq);color:var(--tinta);padding:0 12px;border-radius:8px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero p.sub{font-size:20px;color:#D9D2F7;margin-top:24px;max-width:640px}
.meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:30px;font:500 14px Inter,sans-serif;color:#CFC6F5}
/* article */
article{padding:64px 0 24px}
article h2{font:800 clamp(26px,3.4vw,36px)/1.2 Poppins,Inter,sans-serif;letter-spacing:-.02em;margin:58px 0 14px}
article h3{font:700 21px/1.3 Poppins,Inter,sans-serif;margin:30px 0 8px}
article p{margin:14px 0;color:var(--texto)}
article p strong,article li strong{color:var(--tinta)}
article ul,article ol{margin:14px 0 14px 22px;color:var(--texto)}
article li{margin:8px 0}
.step{display:inline-block;font:800 14px Poppins,sans-serif;letter-spacing:.08em;color:var(--violeta);margin-top:58px}
.step + h2{margin-top:6px}
.toc{background:#fff;border:2px solid var(--lavanda);border-radius:var(--r-lg);padding:26px 30px;margin:0 0 10px}
.toc b{font:700 13px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--violeta)}
.toc ol{margin:12px 0 0 20px}.toc a{text-decoration:none;color:var(--tinta);font-weight:500}.toc a:hover{color:var(--turq-700)}
.code{background:var(--tinta);color:#EDE9FF;border-radius:var(--r-lg);margin:22px 0;overflow:hidden;box-shadow:var(--sh)}
.code .bar{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:var(--tinta-900);font:700 12px Inter,sans-serif;letter-spacing:.1em;color:var(--turq)}
.code button{font:700 13px Inter,sans-serif;background:var(--turq);color:var(--tinta);border:0;border-radius:var(--r-full);padding:8px 16px;cursor:pointer}
.code pre{padding:24px 26px;white-space:pre-wrap;font:500 16px/1.7 Inter,sans-serif}
.code pre em{font-style:normal;color:var(--turq)}
.callout{background:#fff;border-left:6px solid var(--turq);border-radius:0 var(--r) var(--r) 0;padding:20px 26px;margin:26px 0;box-shadow:var(--sh)}
.callout p{margin:0;color:var(--tinta)}
.tw{overflow-x:auto;margin:22px 0;border-radius:var(--r);box-shadow:var(--sh);background:#fff}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:15px}
th,td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--lavanda);vertical-align:top}
th{background:var(--lav-100);font:700 12px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase}
tr:last-child td{border-bottom:0}
.bars{margin:24px 0;display:grid;gap:16px}
.bar2 b{display:flex;justify-content:space-between;font:700 16px Poppins,sans-serif;margin-bottom:6px}
.bar2 i{display:block;height:16px;border-radius:99px;background:var(--lavanda)}
.bar2 i span{display:block;height:100%;border-radius:99px}
.cta{background:var(--tinta-900);color:#fff;border-radius:28px;padding:44px 40px;margin:64px 0 24px;position:relative;overflow:hidden}
.cta:after{content:"";position:absolute;right:-120px;bottom:-160px;width:340px;height:340px;border-radius:50%;background:var(--turq)}
.cta h2{margin:0 0 12px;color:#fff;font-size:30px}
.cta p{color:#D9D2F7;max-width:520px;position:relative;z-index:1;margin:0 0 26px}
.cta .btn{position:relative;z-index:1}
.dl{display:flex;align-items:center;gap:22px;flex-wrap:wrap;background:#fff;border:2px solid var(--lavanda);border-radius:var(--r-lg);padding:26px 30px;margin:26px 0}
.dl div{flex:1;min-width:220px}.dl b{font:700 19px Poppins,sans-serif;display:block}.dl span{font-size:15px;color:var(--texto)}
.rel{padding:20px 0 90px}
.rel h3{font:800 24px Poppins,sans-serif;margin-bottom:18px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px}
.card{background:#fff;border:2px solid var(--lavanda);border-radius:var(--r-lg);padding:28px;text-decoration:none;display:flex;flex-direction:column;gap:10px;transition:transform .2s,box-shadow .2s}
a.card:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.card .tag{font:700 12px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--violeta)}
.card h4{font:800 21px/1.25 Poppins,sans-serif;letter-spacing:-.01em}
.card p{font-size:15px;color:var(--texto);line-height:1.55}
.card .go{margin-top:auto;font:700 14px Inter,sans-serif;color:var(--turq-700)}
.card.soon{background:transparent;border-style:dashed;opacity:.75}
.card .key{display:inline-block;font:700 12px Inter,sans-serif;background:var(--lavanda);padding:4px 10px;border-radius:99px;align-self:flex-start}
footer{background:var(--tinta-900);color:#CFC6F5;padding:40px 0;font-size:14px}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer a{text-decoration:none}
@media(max-width:700px){.nav .links a:not(.btn){display:none}.hd:after{width:200px;height:200px;right:-70px;top:auto;bottom:-90px}.cta{padding:34px 26px}}
