/* 1wingua.com — utilidades escritas a mano */
:root{
  --ink:#141415;--ink-2:#1b1c1f;--ink-3:#25272b;--line:#30333a;
  --mute:#a3abbb;--soft:#d5dae4;--sky:#99c8ff;--lilac:#b173ff;
  --blue:#0075ff;--violet:#7100ff;
  --grad:linear-gradient(100deg,#0075ff 0%,#4a3cff 55%,#7100ff 100%);
  --display:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
  --body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*,*::before,*::after{box-sizing:border-box;border:0 solid var(--line)}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;line-height:1.6;overflow-x:hidden}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
p,figure,ul,ol{margin:0}
ul,ol{padding:0;list-style:none}
:focus-visible{outline:2px solid var(--sky);outline-offset:2px;border-radius:6px}

/* layout */
.container{width:100%;max-width:1240px;margin-left:auto;margin-right:auto;padding-left:16px;padding-right:16px}
.block{display:block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.grid{display:grid}.hidden{display:none}
.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.shrink-0{flex-shrink:0}
.items-center{align-items:center}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-baseline{align-items:baseline}
.justify-between{justify-content:space-between}.justify-center{justify-content:center}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.gap-1{gap:4px}.gap-1\.5{gap:6px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.gap-5{gap:20px}.gap-6{gap:24px}.gap-10{gap:40px}.gap-\[3px\]{gap:3px}
.space-y-2>*+*{margin-top:8px}.space-y-5>*+*{margin-top:20px}
.divide-y>*+*{border-top-width:1px}.divide-line>*+*{border-color:var(--line)}
.relative{position:relative}.absolute{position:absolute}.fixed{position:fixed}.sticky{position:sticky}
.inset-0{inset:0}.inset-x-0{left:0;right:0}.top-0{top:0}.top-24{top:96px}.left-0{left:0}.bottom-0{bottom:0}
.z-50{z-index:50}.z-60{z-index:60}
.overflow-hidden{overflow:hidden}.overflow-x-auto{overflow-x:auto;-webkit-overflow-scrolling:touch}
.snap-x{scroll-snap-type:x proximity}.snap-x.snap-mandatory{scroll-snap-type:x mandatory}.snap-start{scroll-snap-align:start}
.scrollbar-none{scrollbar-width:none}.scrollbar-none::-webkit-scrollbar{display:none}

/* spacing */
.m-0{margin:0}.mx-auto{margin-left:auto;margin-right:auto}.-mx-4{margin-left:-16px;margin-right:-16px}.my-8{margin-top:32px;margin-bottom:32px}
.ml-auto{margin-left:auto}.ml-6{margin-left:24px}
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-5{margin-top:20px}.mt-6{margin-top:24px}.mt-7{margin-top:28px}.mt-8{margin-top:32px}.mt-10{margin-top:40px}.mt-12{margin-top:48px}.mt-16{margin-top:64px}.mt-20{margin-top:80px}.mt-auto{margin-top:auto}
.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}.mb-5{margin-bottom:20px}
.p-2{padding:8px}.p-3{padding:12px}.p-4{padding:16px}.p-5{padding:20px}.p-6{padding:24px}
.px-2{padding-left:8px;padding-right:8px}.px-3{padding-left:12px;padding-right:12px}.px-4{padding-left:16px;padding-right:16px}.px-5{padding-left:20px;padding-right:20px}
.py-1\.5{padding-top:6px;padding-bottom:6px}.py-2{padding-top:8px;padding-bottom:8px}.py-3{padding-top:12px;padding-bottom:12px}.py-4{padding-top:16px;padding-bottom:16px}.py-5{padding-top:20px;padding-bottom:20px}.py-12{padding-top:48px;padding-bottom:48px}.py-16{padding-top:64px;padding-bottom:64px}
.pt-8{padding-top:32px}.pt-10{padding-top:40px}.pb-2{padding-bottom:8px}.pb-5{padding-bottom:20px}
.pl-1\.5{padding-left:6px}.pr-2{padding-right:8px}.pr-4{padding-right:16px}.pr-6{padding-right:24px}

/* sizing */
.w-5{width:20px}.w-9{width:36px}.w-10{width:40px}.w-12{width:48px}.w-14{width:56px}.w-24{width:96px}.w-36{width:144px}.w-48{width:192px}.w-64{width:256px}.w-auto{width:auto}.w-full{width:100%}
.w-billboard{width:min(86vw,560px)}
.min-w-9{min-width:36px}
.h-1{height:4px}.h-2{height:8px}.h-4{height:16px}.h-8{height:32px}.h-9{height:36px}.h-10{height:40px}.h-16{height:64px}.h-60{height:240px}.h-auto{height:auto}.h-full{height:100%}.h-\[3px\]{height:3px}.h-tile{height:75px}
.max-w-sm{max-width:24rem}.max-w-md{max-width:28rem}.max-w-xl{max-width:36rem}.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}

/* type */
.font-display{font-family:var(--display);letter-spacing:-.01em}.font-body{font-family:var(--body)}
.font-normal{font-weight:400}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}
.text-\[10px\]{font-size:10px}.text-xs{font-size:12px;line-height:1.5}.text-sm{font-size:14px;line-height:1.55}.text-base{font-size:16px}.text-lg{font-size:18px}.text-xl{font-size:20px;line-height:1.35}.text-2xl{font-size:24px;line-height:1.25}.text-3xl{font-size:30px;line-height:1.2}.text-4xl{font-size:36px;line-height:1.12}.text-\[120px\]{font-size:120px}
.leading-none{line-height:1}.leading-tight{line-height:1.12}.leading-snug{line-height:1.3}.leading-relaxed{line-height:1.65}
.uppercase{text-transform:uppercase}.tracking-widest{letter-spacing:.14em}.text-center{text-align:center}.whitespace-nowrap{white-space:nowrap}
.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.text-white{color:#fff}.text-mute{color:var(--mute)}.text-soft{color:var(--soft)}.text-sky{color:var(--sky)}.text-lilac{color:var(--lilac)}
.text-grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* color & surfaces */
.bg-ink{background-color:var(--ink)}.bg-ink-2{background-color:var(--ink-2)}.bg-ink-3{background-color:var(--ink-3)}.bg-line{background-color:var(--line)}
.bg-ink\/90{background-color:rgba(20,20,21,.9)}
.bg-blue{background-color:var(--blue)}.bg-violet{background-color:var(--violet)}
.bg-blue-soft{background-color:rgba(0,117,255,.16)}.bg-violet-soft{background-color:rgba(113,0,255,.18)}
.bg-grad{background-image:var(--grad)}
.bg-grad-soft{background-image:radial-gradient(120% 120% at 100% 0%,rgba(113,0,255,.35),transparent 60%),radial-gradient(120% 120% at 0% 100%,rgba(0,117,255,.3),transparent 60%)}
.bg-shade{background:linear-gradient(90deg,rgba(14,14,16,.92) 0%,rgba(14,14,16,.6) 45%,rgba(14,14,16,0) 80%),linear-gradient(0deg,rgba(14,14,16,.7),transparent 55%)}
.bg-grid{position:relative;isolation:isolate}.bg-grid::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(153,200,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(153,200,255,.05) 1px,transparent 1px);background-size:44px 44px;background-position:-1px -1px;-webkit-mask-image:linear-gradient(180deg,#000 40%,transparent);mask-image:linear-gradient(180deg,#000 40%,transparent)}
.bg-rails{background-image:repeating-linear-gradient(90deg,transparent 0 46px,rgba(0,117,255,.10) 46px 48px,transparent 48px 96px,rgba(113,0,255,.10) 96px 98px)}
.bg-gradient-to-r{background-image:linear-gradient(90deg,var(--from,var(--blue)),var(--to,transparent))}
.from-blue{--from:var(--blue)}.from-violet{--from:var(--violet)}.from-sky{--from:var(--sky)}.to-transparent{--to:transparent}
.backdrop-blur{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}

.border{border-width:1px}.border-2{border-width:2px}.border-4{border-width:4px}.border-b{border-bottom-width:1px}.border-t{border-top-width:1px}
.border-line{border-color:var(--line)}.border-lilac{border-color:var(--lilac)}.border-blue{border-color:var(--blue)}.border-violet{border-color:var(--violet)}
.ring-1{box-shadow:0 0 0 1px var(--ring,var(--line))}.ring-line{--ring:var(--line)}
.rounded{border-radius:4px}.rounded-lg{border-radius:8px}.rounded-xl{border-radius:12px}.rounded-2xl{border-radius:16px}.rounded-3xl{border-radius:24px}.rounded-full{border-radius:9999px}.rounded-phone{border-radius:32px}
.shadow-glow{box-shadow:0 10px 30px -10px rgba(74,60,255,.65)}

.object-cover{object-fit:cover}.object-contain{object-fit:contain}.object-right{object-position:right center}.object-top-right{object-position:right top}
.origin-left{transform-origin:left center}.scale-x-0{transform:scaleX(0)}
.transition{transition:transform .25s ease,background-color .2s ease,border-color .2s ease,color .2s ease,filter .2s ease}.duration-500{transition-duration:.5s}

/* states */
.hover\:text-white:hover{color:#fff}.hover\:bg-ink-3:hover{background-color:var(--ink-3)}.hover\:bg-line:hover{background-color:var(--line)}
.hover\:border-blue:hover{border-color:var(--blue)}.hover\:brightness-110:hover{filter:brightness(1.1)}
.group:hover .group-hover\:text-white{color:#fff}.group:hover .group-hover\:-translate-y-1{transform:translateY(-4px)}.group:hover .group-hover\:scale-105{transform:scale(1.05)}
nav a[aria-current="page"]{color:#fff;background-color:var(--ink-3)}
#menu-movil a[aria-current="page"]{box-shadow:inset 0 0 0 1px var(--blue)}

/* artículo */
.prose{min-width:0;max-width:760px;color:var(--soft);font-size:17px;line-height:1.72}
.prose h1{font-family:var(--display);font-size:34px;line-height:1.12;font-weight:700;color:#fff;letter-spacing:-.015em;margin:0 0 20px}
.prose h2{font-family:var(--display);font-size:26px;line-height:1.2;font-weight:600;color:#fff;margin:48px 0 14px;padding-top:18px;position:relative}
.prose h2::before{content:"";position:absolute;left:0;top:0;width:44px;height:3px;border-radius:3px;background:var(--grad);box-shadow:0 7px 0 -0px rgba(113,0,255,.35)}
.prose h3{font-family:var(--display);font-size:19px;font-weight:600;color:#fff;margin:28px 0 8px}
.prose p{margin:0 0 16px}
.prose a:not([class]){color:var(--sky);text-decoration:underline;text-decoration-color:rgba(153,200,255,.4);text-underline-offset:3px}
.prose a:not([class]):hover{color:#fff;text-decoration-color:#fff}
.prose strong{color:#fff;font-weight:600}
.prose ul,.prose ol{margin:0 0 18px;display:grid;gap:8px}
.prose ul>li{position:relative;padding-left:22px}
.prose ul>li::before{content:"";position:absolute;left:2px;top:.72em;width:10px;height:3px;border-radius:2px;background:var(--grad)}
.prose ol{counter-reset:paso}
.prose ol>li{counter-increment:paso;position:relative;padding-left:40px;min-height:28px}
.prose ol>li::before{content:counter(paso);position:absolute;left:0;top:1px;width:28px;height:28px;border-radius:9px;background:var(--ink-3);border:1px solid var(--line);color:#fff;font:600 13px/26px var(--display);text-align:center}
.table-wrap{margin:8px 0 22px;overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--ink-2)}
.prose table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
.prose th{text-align:left;font-family:var(--display);font-weight:600;color:#fff;background:var(--ink-3);padding:12px 14px;white-space:nowrap}
.prose td{padding:11px 14px;border-top:1px solid var(--line);vertical-align:top}
.prose td:first-child{color:#fff;font-weight:500}
.prose .not-prose{font-size:16px;line-height:1.6}
.prose .not-prose p{margin:0}
.prose .not-prose ul,.prose .not-prose ol{display:flex;margin:0}

/* responsive */
@media (min-width:640px){
  .sm\:inline{display:inline}.sm\:inline-flex{display:inline-flex}.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:768px){
  .container{padding-left:24px;padding-right:24px}
  .md\:flex-row{flex-direction:row}.md\:gap-4{gap:16px}
  .md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .md\:h-72{height:288px}.md\:mx-0{margin-left:0;margin-right:0}
  .md\:p-4{padding:16px}.md\:p-6{padding:24px}.md\:px-0{padding-left:0;padding-right:0}.md\:pt-10{padding-top:40px}.md\:pt-14{padding-top:56px}.md\:py-24{padding-top:96px;padding-bottom:96px}
  .md\:text-sm{font-size:14px}.md\:text-2xl{font-size:24px;line-height:1.25}.md\:text-3xl{font-size:30px;line-height:1.2}.md\:text-4xl{font-size:36px;line-height:1.12}.md\:text-5xl{font-size:48px;line-height:1.08}.md\:text-\[180px\]{font-size:180px}
  .md\:w-32{width:128px}.md\:w-44{width:176px}.md\:w-72{width:288px}
  .prose h1{font-size:42px}.prose h2{font-size:28px}
}
@media (min-width:1024px){
  .lg\:block{display:block}.lg\:flex{display:flex}.lg\:hidden{display:none}.lg\:grid{display:grid}.lg\:gap-12{gap:48px}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lg\:grid-cols-main{grid-template-columns:minmax(0,1fr) 280px}
}
@media (max-width:1023px){ .lg\:hidden.hidden{display:none} }
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.transition{transition:none}}
