/* Bibot · sistema de diseño: modo oscuro con vidrio, un solo acento y tipografía editorial. */
:root{
  --night:#0a0c12;--night2:#10131c;--surface:#151926;--line:rgba(255,255,255,.1);--line2:rgba(255,255,255,.18);
  --paper:#f2f1ec;--mut:#a9a8a0;--mint:#5ef2c1;--violet:#7c6cff;--warn:#ffb454;--bad:#ff8a7a;
  --ease:cubic-bezier(.16,1,.3,1);
  --display:"Bricolage Grotesque",system-ui,sans-serif;--sans:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"Geist Mono",ui-monospace,monospace;--serif:"Instrument Serif",Georgia,serif;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:90px;background:var(--night);color-scheme:dark}
body{background:var(--night);color:var(--paper);font:400 17px/1.55 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--mint);outline-offset:3px;border-radius:6px}
::selection{background:var(--mint);color:var(--night)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1240px;margin:0 auto;padding:0 28px}
.ser{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.01em}
.mono{font-family:var(--mono)}
.mut{color:var(--mut)}
.mint{color:var(--mint)}
h1,h2,h3{font-family:var(--display);font-weight:600;font-variation-settings:"wdth" 96;letter-spacing:-.034em;line-height:1;text-wrap:balance}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 26px;border-radius:999px;border:1px solid transparent;font-weight:600;font-size:16px;white-space:nowrap;transition:transform .3s var(--ease),background .2s,border-color .2s,filter .2s}
.btn:active{transform:scale(.97);transition-duration:.1s}
.btn.p{background:var(--mint);color:#08110e}.btn.p:hover{filter:brightness(1.08)}
.btn.g{background:rgba(255,255,255,.06);border-color:var(--line2);color:var(--paper)}.btn.g:hover{background:rgba(255,255,255,.12)}
.btn.sm{min-height:42px;padding:0 20px;font-size:15px}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.danger{background:rgba(255,138,122,.12);border-color:rgba(255,138,122,.4);color:var(--bad)}

/* Vidrio */
.glass{position:relative;isolation:isolate;background:rgba(255,255,255,.045);border:1px solid var(--line);border-radius:28px;backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 30px 60px -36px #000}
.glass::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),rgba(94,242,193,.14),transparent 62%);opacity:0;transition:opacity .4s var(--ease);pointer-events:none}
.glass:hover::before{opacity:1}
@media(prefers-reduced-transparency:reduce){.glass{background:var(--surface);backdrop-filter:none}.nav .bar{background:var(--night2)!important;backdrop-filter:none!important}}

/* Campos */
label.l{display:block;font-size:14px;font-weight:600;margin-bottom:8px;color:#e6e5de}
.in,.ta,.sel{width:100%;min-height:50px;background:var(--night);border:1px solid var(--line2);border-radius:14px;padding:0 16px;color:var(--paper);transition:border-color .2s}
.ta{padding:12px 16px;min-height:96px;resize:vertical;line-height:1.5}
.in::placeholder,.ta::placeholder{color:#8e8d86}
.in:focus,.ta:focus,.sel:focus{outline:2px solid var(--mint);outline-offset:1px;border-color:transparent}
.in[aria-invalid=true],.ta[aria-invalid=true]{border-color:var(--bad)}
.err{color:var(--bad);font-size:14px;margin-top:8px}
.hint{color:var(--mut);font-size:13.5px;margin-top:6px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line2);border-radius:999px;padding:4px 12px;font-size:13px;font-weight:600;color:var(--mut)}
.chip.ok{border-color:rgba(94,242,193,.45);color:var(--mint);background:rgba(94,242,193,.08)}
.chip.warn{border-color:rgba(255,180,84,.5);color:var(--warn);background:rgba(255,180,84,.08)}
.chip.bad{border-color:rgba(255,138,122,.5);color:var(--bad);background:rgba(255,138,122,.08)}

/* Barra superior en cápsula */
.nav{position:fixed;inset:14px 0 auto;z-index:50;display:flex;justify-content:center;padding:0 16px;pointer-events:none}
.nav .bar{pointer-events:auto;width:100%;max-width:960px;height:58px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 8px 0 20px;border-radius:999px;border:1px solid var(--line);background:rgba(10,12,18,.7);backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 18px 40px -18px #000;position:relative}
.logo{display:inline-flex;align-items:center;gap:10px;font:700 22px var(--display);letter-spacing:-.04em}
.logo svg{width:28px;height:28px}
.nav nav{position:absolute;left:50%;transform:translateX(-50%);display:flex;gap:4px}
.nav nav a{padding:8px 14px;border-radius:999px;font-size:14.5px;font-weight:500;color:#cfcec7;transition:color .2s,background .2s}
.nav nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.nav .r{display:flex;align-items:center;gap:8px}
.progress{position:absolute;left:24px;right:24px;bottom:0;height:2px;border-radius:2px;background:var(--mint);transform-origin:0 50%;transform:scaleX(0)}

/* Aparición */
.rv{opacity:0;transform:translate3d(0,26px,0);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0ms)}
.rv.vis{opacity:1;transform:none}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .1em}
.w>span{display:inline-block;transform:translateY(108%);animation:up .9s var(--ease) forwards;animation-delay:calc(var(--i)*55ms + 120ms)}
@keyframes up{to{transform:none}}
@media(prefers-reduced-motion:reduce){*,::before,::after{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}.w>span{transform:none}html{scroll-behavior:auto}}

@media(max-width:860px){.nav nav{display:none}.wrap{padding:0 20px}}