@layer base,component,modifier;@layer base{:root{scroll-behavior:smooth;--base-200: #F4F7F9;--base-400: #94A3B8;--base-600: #475569;--base-800: #1E2025;--accent-primary: #00A1E4;--accent-primary-dark: #008ac7;--accent-shadow: rgba(0, 161, 228, .15);--highlight-bg: #fff3cd;--backdrop-bg: rgba(0,0,0, 50%);--syntax-primary: #ff3aa1;--syntax-secondary: #4065ff;--syntax-emphasis: #419fff;--syntax-mark-bg: #2bb8ff26;--link: var(--accent-primary);--visited: var(--accent-primary);--m: 1.5rem;--l: 3rem;--xl: 4.5rem;--max-line-width: 45rem;--font-poppins: "Poppins", sans-serif;--font-inter: "Inter", sans-serif}}@layer base{body{max-width:1080px;flex-direction:column;min-height:100vh;margin:0 auto;display:flex}main{flex:1}header{align-items:center;display:flex;justify-content:space-between;padding:var(--m);background-color:var(--base-200);border-bottom:1px solid var(--base-400);position:sticky;top:0;z-index:1000}header nav{align-items:center;display:flex;gap:2em}header nav a{text-decoration:none;white-space:nowrap;display:flex;align-items:center;gap:.5em;font-weight:500;transition:color .3s ease}header nav a,header nav a:visited{color:var(--base-600)}header nav a:hover{color:var(--accent-primary)}header nav a[aria-current=page]{font-weight:800;color:var(--base-800)}@media (max-width: 768px){header nav{display:none}}footer{align-items:center;display:flex;gap:1em}footer nav:last-of-type{margin-left:auto;justify-content:right}nav:has(button){gap:.75em}.container{padding:var(--m)}.blocks{align-items:center;flex-direction:row;display:flex;gap:var(--m)}@media (width > 900px){.columns{column-count:var(--column-count, 2);margin-block:var(--l);column-gap:var(--xl)}.columns div{break-inside:avoid}.columns>:first-child,.columns>:first-child h2,.columns>:first-child h3{margin-top:0}}.note{background-color:var(--base-200);max-width:var(--max-line-width);margin-block:var(--m);padding:1em}.note p{margin:0}.grid{display:grid;gap:var(--m);grid-template-columns:repeat(auto-fit,minmax(min(20rem,100%),1fr));align-items:center}.stack{display:flex;flex-direction:column;gap:var(--m)}}@layer base{*,*:before,*:after{box-sizing:border-box}body{line-height:1.5;color:var(--base-800);font-family:var(--font-inter);background-color:var(--base-200)}figure{padding:0;margin:0}img{max-width:100%;height:auto}h1,h2,h3,h4,h5,h6{font-family:var(--font-poppins);color:var(--base-800);line-height:1.2}h1{font-size:3rem;margin-block:.33em;text-wrap:balance;line-height:1.25}h1+p{margin-top:0}h2{font-size:2.5rem;margin-block:.6em;text-wrap:balance;line-height:1.25}h2+p{margin-top:0}h3,h4{margin-block:.5em;text-wrap:balance;line-height:1.25}:is(h3,h4)+p{margin-top:0}ol,ul,figure,table{margin-block:var(--m)}a{color:var(--link);text-decoration:none}a:visited{color:var(--visited)}a[name]{color:inherit}a:target{background-color:var(--highlight-bg)}strong,li,td{color:var(--base-800)}p{color:var(--base-800);text-wrap:pretty;max-width:var(--max-line-width)}p code{background-color:var(--base-200);font-family:courier,monospace;padding:.125em .25em;font-size:.875em}ol,ul{padding-left:1em}li{padding-left:.5em}hr{border:1px solid var(--base-200);margin-block:var(--l);border-width:1px 0 0}blockquote{font-weight:700;margin:var(--l) 0}small,figcaption{font-weight:400;font-size:.875em;color:var(--base-600)}dl{display:grid;grid-template-columns:25% 1fr}dl>*{margin:.25em 0}dl dt{font-weight:500}dl p:first-child{margin-top:0}time{white-space:nowrap}}@layer component{button,.button{display:inline-flex;align-items:center;justify-content:center;text-align:center;font-family:inherit;font-size:inherit;padding:.5em 1em;cursor:pointer;border-radius:.25em;gap:.5em;border:2px solid transparent;transition:all .3s ease}:is(button,.button):hover{transform:translateY(-1px);box-shadow:0 2px 4px var(--accent-shadow)}:is(button,.button)[disabled]{pointer-events:none;opacity:.33}:is(button,.button).plain{background-color:unset;color:var(--base-600);border:0;padding:0}:is(button,.button).plain:hover{color:var(--base-800);transform:scale(1.02)}:is(button,.button).primary{background-color:var(--accent-primary);color:var(--base-200);border-color:var(--accent-primary)}:is(button,.button).primary:hover{background-color:var(--accent-primary-dark);border-color:var(--accent-primary-dark)}:is(button,.button).secondary{background-color:transparent;color:var(--accent-primary);border-color:var(--accent-primary)}:is(button,.button).secondary:hover{background-color:var(--accent-primary);color:var(--base-200);border-color:var(--accent-primary-dark)}}@layer component{dialog{margin-top:10em;padding:1.5em;max-width:100%;width:25em}dialog>:first-child{margin:0}dialog::backdrop{background-color:var(--backdrop-bg);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}}@layer component{article{flex-direction:column;display:flex;gap:var(--xl)}h1,h2,h3,p,li,figure{max-width:var(--max-line-width)}h1{font-size:2.25em}h1+p,h1+time+p{font-size:1.125em;text-wrap:balance}section>:is(h3,h4){margin-top:var(--l)}}@layer base{form{flex-direction:column;margin-block:1em;display:flex;gap:1em}label h3{font-size:1em;margin-block:.5em}input,textarea{border:1px solid var(--base-400);background-color:transparent;color:var(--base-800);font-family:inherit;font-size:inherit;padding:.5em;margin:0}h3+:is(input,textarea){width:100%}fieldset{display:flex;gap:1em}fieldset label{display:inline-flex;align-items:baseline;cursor:pointer;gap:.25em}fieldset:not(:has(legend)){border:unset;padding:0}}@layer base{pre{border:1px solid var(--base-200);counter-reset:line-number 0;color:var(--base-600);padding:2em}pre *{font-weight:400;font-style:inherit;text-decoration:inherit}pre b{color:var(--syntax-primary)}pre em{color:var(--syntax-secondary)}pre strong{color:var(--syntax-emphasis)}pre i{color:var(--base-400)}pre sup{opacity:.5;vertical-align:inherit;font-size:inherit}pre mark{background-color:var(--syntax-mark-bg);color:inherit;border-radius:.2em;padding-block:.25em}pre label{font-weight:700;color:var(--base-800)}pre span{counter-increment:line-number 1}pre span:before{opacity:.3;content:counter(line-number);display:inline-block;text-align:right;padding-right:1em;margin-right:1em;width:2.5em}}@layer base{table{border-collapse:collapse;width:100%}table th,table td{border-bottom:1px solid var(--base-200);padding:.5em 0;text-align:left}:is(table th,table td):not(:first-child){padding-left:2em}table td:first-child{white-space:nowrap;width:25%}table tfoot td{color:var(--base-800);font-weight:500;border:0}}@layer component{.toast{background-color:var(--base-800);padding:.5em 1em;position:fixed;bottom:1em;right:1em}.toast p{color:var(--base-200);margin:0}.logo{font-family:var(--font-poppins);font-weight:800;font-size:1.5rem;color:var(--base-800);text-decoration:none}.logo img{width:40px;height:40px;border-radius:50%;box-shadow:0 4px 8px var(--accent-shadow);transition:all .3s ease-in-out}.logo img:hover{box-shadow:0 6px 12px var(--accent-shadow);transform:translateY(-2px)}.avatar{width:300px;height:300px;border-radius:50%;object-fit:cover;box-shadow:0 8px 16px var(--accent-shadow);transition:all .3s ease-in-out}.avatar:hover{box-shadow:0 12px 24px var(--accent-shadow);transform:translateY(-4px)}@media (max-width: 768px){.avatar{width:150px;height:150px}}.icon{color:var(--base-800);transition:color .3s ease-in-out}.icon:hover{color:var(--accent-primary)}.card{background-color:var(--base-100);border:1px solid var(--base-300);border-radius:8px;padding:2em;box-shadow:0 4px 8px var(--accent-shadow);transition:all .3s ease-in-out}.card:hover{box-shadow:0 8px 16px var(--accent-shadow);transform:translateY(-4px)}}@layer modifier{.thin{max-width:25em}.wide{max-width:inherit;width:100%}.loose{margin-block:var(--l)}[hidden]{display:none}a:has(img:only-child){font-size:0}.shapes{background-image:url(../../../marca/formas.png);background-repeat:repeat;background-size:150px;opacity:.05;pointer-events:none;position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1}.emphatized{text-align:center}.emphatized h2,.emphatized h3,.emphatized p{min-width:100%}.inverted{background-color:var(--base-800);color:var(--base-200)}.inverted h1,.inverted h2,.inverted h3,.inverted h4,.inverted h5,.inverted h6,.inverted strong{color:var(--base-100)}.inverted a{color:var(--accent-primary)}.compact{padding-block:2em}}
