#preloader{position:fixed; inset:0; z-index:9999; background:var(--bg); display:flex; align-items:center; justify-content:center; transition:opacity .6s ease, visibility .6s ease;}
#preloader.done{opacity:0; visibility:hidden; pointer-events:none;}
.preloader-stamp{width:110px; height:110px; border:3px solid var(--stamp); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono'; font-weight:700; color:var(--stamp); text-transform:uppercase; letter-spacing:0.08em; font-size:0.78rem; animation:preloaderStamp .9s cubic-bezier(.34,1.7,.6,1) forwards, preloaderPulse 1.4s ease-in-out .9s infinite; opacity:0; transform:scale(1.6) rotate(-18deg);}
@keyframes preloaderStamp{0%{opacity:0; transform:scale(1.6) rotate(-18deg);} 60%{opacity:1; transform:scale(0.92) rotate(6deg);} 100%{opacity:1; transform:scale(1) rotate(0deg);}}
@keyframes preloaderPulse{0%,100%{box-shadow:0 0 0 0 rgba(178,58,46,0.25);} 50%{box-shadow:0 0 0 16px rgba(178,58,46,0);}}
.scroll-progress{position:fixed; top:0; left:0; height:3px; background:linear-gradient(90deg, var(--stamp), var(--accent)); z-index:100; width:0%; transition:width .05s linear;}
.cursor-dot,.cursor-ring{position:fixed; pointer-events:none; z-index:9998; border-radius:50%; transform:translate(-50%,-50%); transition:opacity .2s ease;}
.cursor-dot{width:6px; height:6px; background:var(--accent);}
.cursor-ring{width:34px; height:34px; border:1.5px solid var(--accent); opacity:.35; transition:width .15s ease, height .15s ease, opacity .15s ease, background .15s ease;}
.cursor-ring.hover{width:52px; height:52px; opacity:.18; background:rgba(14,148,136,0.08);}
.cursor-ring.click{transform:translate(-50%,-50%) scale(0.85);}
@media (pointer:coarse){.cursor-dot,.cursor-ring{display:none;}}
.spotlight{position:fixed; inset:0; pointer-events:none; z-index:0; background:radial-gradient(620px circle at var(--mx,50%) var(--my,20%), rgba(14,148,136,0.09), transparent 62%); opacity:0; transition:opacity .6s ease;}
.spotlight.ready{opacity:1;}
.floater{position:fixed; pointer-events:none; z-index:0; border-radius:50%; background:radial-gradient(circle, rgba(14,148,136,0.12), transparent 70%); filter:blur(40px); animation:floatShape 18s ease-in-out infinite;}
.floater.f1{width:340px; height:340px; top:10%; left:-120px;}
.floater.f2{width:260px; height:260px; top:45%; right:-80px; animation-delay:-6s;}
.floater.f3{width:180px; height:180px; bottom:15%; left:8%; animation-delay:-12s;}
@keyframes floatShape{0%,100%{transform:translate(0,0) scale(1);} 33%{transform:translate(30px,-40px) scale(1.08);} 66%{transform:translate(-20px,25px) scale(0.95);}}
header{position:sticky; top:0; z-index:50; background:rgba(239,237,230,0.85); backdrop-filter:blur(14px) saturate(1.2); border-bottom:1px solid var(--line-strong); transform:translateY(-100%); animation:navDrop .7s cubic-bezier(.22,1.6,.4,1) .4s forwards;}
@keyframes navDrop{to{transform:translateY(0);}}
nav{display:flex; align-items:center; justify-content:space-between; height:66px;}
.logo{display:flex; align-items:center; gap:9px; font-family:'IBM Plex Mono'; font-weight:700; font-size:1.05rem; position:relative;}
.logo .dot{width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--accent-tint); animation:logoPulse 2.2s ease-in-out infinite;}
@keyframes logoPulse{0%,100%{box-shadow:0 0 0 4px var(--accent-tint);} 50%{box-shadow:0 0 0 7px rgba(14,148,136,0.18);}}
.nav-links{display:flex; gap:26px; align-items:center;}
.nav-links a{font-size:0.85rem; color:var(--ink-soft); font-weight:500; font-family:'IBM Plex Mono'; position:relative; padding:4px 0; transition:color .2s ease;}
.nav-links a::after{content:''; position:absolute; left:0; bottom:0; width:0; height:1.5px; background:var(--accent); transition:width .25s cubic-bezier(.22,1,.4,1);}
.nav-links a:hover{color:var(--ink);}
.nav-links a:hover::after{width:100%;}
.btn{display:inline-flex; align-items:center; gap:8px; background:var(--ink); color:#fff; padding:11px 20px; border-radius:6px; font-weight:600; font-size:0.86rem; font-family:'IBM Plex Mono'; border:none; cursor:pointer; transition:transform .15s ease, background .15s ease, box-shadow .2s ease; white-space:nowrap; position:relative; overflow:hidden;}
.btn::after{content:''; position:absolute; inset:0; background:radial-gradient(circle at var(--bx,50%) var(--by,50%), rgba(255,255,255,0.2) 0%, transparent 50%); opacity:0; transition:opacity .2s ease;}
.btn:hover{background:var(--accent-dark); transform:translateY(-2px); box-shadow:0 8px 20px -8px rgba(14,148,136,0.45);}
.btn:hover::after{opacity:1;}
.btn:active{transform:translateY(0) scale(0.98);}
.btn-nav{padding:9px 16px; font-size:0.78rem;}
.btn svg{width:15px; height:15px;}
.btn-stamp{display:inline-flex; align-items:center; gap:9px; background:transparent; color:var(--stamp); border:2px solid var(--stamp); border-radius:5px; padding:13px 22px; font-family:'IBM Plex Mono'; font-weight:700; font-size:0.88rem; text-transform:uppercase; letter-spacing:0.04em; transform:rotate(-1.2deg); transition:transform .15s ease, background .15s ease, color .15s ease, box-shadow .2s ease; position:relative; overflow:hidden;}
.btn-stamp:hover{background:var(--stamp); color:#fff; transform:rotate(0deg) scale(1.03); box-shadow:0 10px 24px -8px rgba(178,58,46,0.35);}
.btn-stamp.stamp-hit{animation:stampHit .36s cubic-bezier(.34,1.7,.6,1);}
@keyframes stampHit{0%{transform:rotate(-1.2deg) scale(1);} 35%{transform:rotate(2.5deg) scale(0.86);} 100%{transform:rotate(0deg) scale(1.03);}}
@keyframes blinkCursor{0%,55%{opacity:1;} 56%,100%{opacity:0;}}
.link-ghost{font-size:0.85rem; font-weight:600; color:var(--ink); font-family:'IBM Plex Mono'; border-bottom:1.5px solid var(--ink); padding-bottom:2px; position:relative; transition:color .2s ease, border-color .2s ease;}
.link-ghost:hover{color:var(--accent-dark); border-color:var(--accent-dark);}
.chat-toggle{position:fixed; bottom:26px; right:26px; z-index:70; width:58px; height:58px; border-radius:50%; background:var(--ink); color:#fff; border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 14px 28px -10px rgba(23,30,35,0.5); transition:transform .25s cubic-bezier(.34,1.7,.6,1), box-shadow .25s ease;}
.chat-toggle:hover{transform:scale(1.1) rotate(8deg); box-shadow:0 18px 36px -12px rgba(23,30,35,0.55);}
.chat-toggle:active{transform:scale(0.95);}
.chat-toggle svg{width:22px; height:22px;}
.chat-toggle .ping{position:absolute; top:-3px; right:-3px; width:14px; height:14px; border-radius:50%; background:var(--stamp); border:2px solid var(--bg); animation:pingPulse 1.6s ease-in-out infinite;}
@keyframes pingPulse{0%,100%{transform:scale(1); opacity:1;} 50%{transform:scale(1.3); opacity:.7;}}
.chat-panel{position:fixed; bottom:96px; right:26px; z-index:70; width:340px; max-width:calc(100vw - 40px); height:440px; background:var(--paper); border-radius:14px; border:1px solid var(--line-strong); box-shadow:0 30px 60px -16px rgba(23,30,35,0.3); display:flex; flex-direction:column; overflow:hidden; opacity:0; transform:translateY(24px) scale(0.96); pointer-events:none; transition:opacity .3s cubic-bezier(.22,1,.4,1), transform .3s cubic-bezier(.22,1.6,.4,1);}
.chat-panel.open{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
.chat-panel-head{background:var(--ink); color:#fff; padding:14px 16px; display:flex; align-items:center; gap:10px;}
.chat-panel-head .avatar{width:32px; height:32px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; font-weight:700; font-family:'IBM Plex Mono'; font-size:0.76rem; animation:avatarBounce 2.2s ease-in-out infinite;}
@keyframes avatarBounce{0%,100%{transform:translateY(0);} 50%{transform:translateY(-2px);}}
.chat-panel-head .who{font-family:'IBM Plex Mono'; font-weight:700; font-size:0.86rem;}
.chat-panel-head .who span{display:block; font-family:'Inter'; font-weight:400; font-size:0.68rem; color:rgba(255,255,255,0.6);}
.chat-panel-close{margin-left:auto; background:none; border:none; color:rgba(255,255,255,0.7); cursor:pointer; font-size:1rem; line-height:1; transition:color .2s ease, transform .2s ease;}
.chat-panel-close:hover{color:#fff; transform:rotate(90deg);}
.chat-body{flex:1; padding:14px; overflow-y:auto; display:flex; flex-direction:column; gap:9px; background:#F7F5EF;}
.cb-msg{max-width:85%; padding:8px 11px; border-radius:11px; font-size:0.82rem; font-family:'Inter'; opacity:0; transform:translateY(8px) scale(0.96); animation:pop .35s cubic-bezier(.22,1.6,.4,1) forwards;}
.cb-msg.bot{align-self:flex-start; background:#fff; border:1px solid var(--line-strong); border-bottom-left-radius:3px;}
.cb-msg.user{align-self:flex-end; background:var(--accent); color:#fff; border-bottom-right-radius:3px;}
.cb-typing{align-self:flex-start; display:flex; gap:4px; padding:9px 11px; background:#fff; border:1px solid var(--line-strong); border-radius:11px; border-bottom-left-radius:3px;}
.cb-typing span{width:6px; height:6px; border-radius:50%; background:var(--ink-faint); animation:tbounce 1s infinite ease-in-out;}
.cb-typing span:nth-child(2){animation-delay:.15s;}
.cb-typing span:nth-child(3){animation-delay:.3s;}
@keyframes tbounce{0%,60%,100%{transform:translateY(0); opacity:.5;} 30%{transform:translateY(-4px); opacity:1;}}
.cb-options{display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 12px; background:#F7F5EF;}
.cb-opt{border:1px solid var(--accent); color:var(--accent-dark); background:var(--accent-tint); padding:6px 11px; border-radius:5px; font-size:0.75rem; font-family:'IBM Plex Mono'; font-weight:600; cursor:pointer; transition:background .15s ease, color .15s ease, transform .15s ease;}
.cb-opt:hover{background:var(--accent); color:#fff; transform:translateY(-2px);}
.cb-opt:active{transform:translateY(0);}
.chat-input{display:flex; gap:8px; padding:10px 14px 14px; background:#F7F5EF; border-top:1px solid var(--line-strong);}
.chat-input input{flex:1; font-family:'Inter'; font-size:0.88rem; padding:10px 12px; border:1.5px solid var(--line-strong); border-radius:6px; background:#fff; color:var(--ink); outline:none; transition:border-color .2s ease, box-shadow .2s ease;}
.chat-input input:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(14,148,136,0.12);}
.chat-input button{width:38px; height:38px; border-radius:6px; background:var(--ink); color:#fff; border:none; cursor:pointer; font-size:1rem; transition:background .15s ease, transform .15s ease;}
.chat-input button:hover{background:var(--accent-dark); transform:translateY(-1px);}
.chat-input button:disabled{background:var(--ink-faint); cursor:not-allowed; transform:none;}
.magnetic{transition:transform .15s ease-out;}
.counter{font-variant-numeric:tabular-nums;}

/* Formulario de contacto */
.contact-form{max-width:620px; margin:0 auto; display:flex; flex-direction:column; gap:18px;}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.form-field{display:flex; flex-direction:column; gap:6px;}
.form-field span{font-family:'IBM Plex Mono'; font-size:0.74rem; color:var(--ink-soft); text-transform:uppercase; letter-spacing:0.04em;}
.form-field input,
.form-field select,
.form-field textarea{font-family:'Inter'; font-size:0.95rem; padding:12px 14px; border:1.5px solid var(--line-strong); border-radius:7px; background:var(--paper); color:var(--ink); outline:none; transition:border-color .2s ease, box-shadow .2s ease;}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(14,148,136,0.12);}
.form-field textarea{resize:vertical; min-height:110px;}
.form-actions{display:flex; gap:12px; flex-wrap:wrap; align-items:center;}
.btn-submit{background:var(--accent);}
.btn-submit:hover{background:var(--accent-dark);}
.btn-ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line-strong);}
.btn-ghost:hover{background:var(--ink); color:#fff; border-color:var(--ink);}
.form-status{font-size:0.78rem; min-height:1.2em;}
.form-status.success{color:var(--accent-dark);}
.form-status.error{color:var(--stamp);}
.form-status.sending{color:var(--ink-faint);}
@media (max-width:560px){.form-row{grid-template-columns:1fr;}}