.profile{min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(2rem,5vw,3.5rem);padding:calc(var(--header) + 2rem) var(--gutter) 3rem;max-width:72rem;margin:0 auto;color:var(--text)}
.profile-top{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,6vw,5rem);align-items:center}
.profile-avatar{width:clamp(7rem,20vw,11.5rem);aspect-ratio:1;border-radius:50%;padding:4px;background:linear-gradient(135deg,var(--blue),#79a7ff 50%,var(--border))}
.profile-avatar img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;border-radius:50%;border:4px solid var(--bg);display:block}
.profile-name{display:flex;align-items:center;gap:.6rem;font-size:clamp(1.5rem,3vw,2.2rem);font-weight:600;margin:0}
.profile-name svg{width:1.4rem;height:1.4rem;flex:none}
.profile-sub{color:var(--muted);margin:.25rem 0 1rem}
.profile-stats{display:flex;gap:clamp(1rem,3vw,2.5rem);list-style:none;padding:0;margin:0 0 1.25rem;flex-wrap:wrap}
.profile-stats b{font-weight:600;color:var(--text)}.profile-stats li{color:var(--muted)}
.profile-bio{line-height:1.6;margin:0}.profile-bio a{color:var(--link)}
.profile-actions{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.profile-actions a{display:flex;align-items:center;justify-content:center;min-height:var(--tap);border-radius:10px;padding:.5rem 1rem;text-align:center;background:var(--surface);border:1px solid var(--border);color:var(--text);font-weight:600;text-decoration:none;transition:background var(--fast) var(--ease)}
.profile-actions a:first-child{background:var(--blue);border-color:var(--blue)}
.profile-actions a:hover{filter:brightness(1.15)}
.profile-highlights{display:flex;gap:clamp(1rem,3vw,2rem);overflow-x:auto;padding:.25rem 0 .5rem;scrollbar-width:none}
.profile-highlights a{flex:none;display:flex;flex-direction:column;align-items:center;gap:.6rem;width:5.5rem;color:var(--text);text-decoration:none;font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;text-align:center}
.profile-highlights span{width:5rem;height:5rem;border-radius:50%;display:grid;place-items:center;background:#000;border:2px solid var(--border);box-shadow:0 0 0 3px var(--bg) inset;font-size:1.8rem;transition:border-color var(--fast) var(--ease),transform var(--fast) var(--ease)}
.profile-highlights a:hover span{border-color:var(--blue);transform:scale(1.05)}
@media (max-width:640px){.profile-top{grid-template-columns:1fr;justify-items:center;text-align:center}.profile-name{justify-content:center}.profile-stats{justify-content:center}}
/* === Efectos dinámicos === */
@property --ang{syntax:'<angle>';inherits:false;initial-value:0deg}
.profile{position:relative;isolation:isolate;overflow-x:clip}
.profile::before{content:"";position:absolute;inset:-10% 0;z-index:-1;pointer-events:none;background:radial-gradient(40% 35% at var(--mx,30%) var(--my,30%),#2e6bff33,transparent 70%),radial-gradient(30% 30% at 80% 70%,#79a7ff1f,transparent 70%);animation:glow-drift 12s ease-in-out infinite alternate}
@keyframes glow-drift{to{transform:translate3d(3%,-4%,0) scale(1.08)}}
.profile-avatar{position:relative;background:conic-gradient(from var(--ang),#2e6bff,#79a7ff,#c7dbff,#2e6bff);animation:ring-spin 4s linear infinite,pop-in .9s cubic-bezier(.2,.9,.3,1.3) both}
.profile-avatar::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid #2e6bff66;animation:pulse 2.4s ease-out infinite}
@keyframes ring-spin{to{--ang:360deg}}
@keyframes pulse{from{transform:scale(1);opacity:1}to{transform:scale(1.18);opacity:0}}
@keyframes pop-in{from{transform:scale(.6);opacity:0}}
@keyframes rise{from{transform:translateY(24px);opacity:0;filter:blur(6px)}}
.profile-name,.profile-sub,.profile-stats li,.profile-bio,.profile-actions a,.profile-highlights a{animation:rise .8s cubic-bezier(.2,.75,.2,1) both}
.profile-name{animation-delay:.25s}.profile-sub{animation-delay:.35s}
.profile-stats li:nth-child(1){animation-delay:.45s}.profile-stats li:nth-child(2){animation-delay:.52s}.profile-stats li:nth-child(3){animation-delay:.59s}
.profile-bio{animation-delay:.7s}.profile-actions a:nth-child(1){animation-delay:.85s}.profile-actions a:nth-child(2){animation-delay:.95s}
.profile-highlights a{animation-delay:calc(1s + var(--i,0)*90ms)}
.profile-name svg{animation:pop-in .6s .9s cubic-bezier(.2,.9,.3,1.6) both}
.profile-actions a{position:relative;overflow:hidden}
.profile-actions a:first-child::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,#ffffff55 50%,transparent 70%);transform:translateX(-100%);animation:shine 3.5s 2s ease-in-out infinite}
@keyframes shine{40%,100%{transform:translateX(100%)}}
.profile-actions a:hover{transform:translateY(-2px);box-shadow:0 10px 30px -10px #2e6bffaa}
.profile-highlights span{position:relative;transition:border-color var(--fast) var(--ease),transform .35s cubic-bezier(.2,.9,.3,1.5),box-shadow .35s}
.profile-highlights a:hover span{transform:scale(1.12) rotate(-4deg);box-shadow:0 0 0 3px var(--bg) inset,0 0 24px #2e6bff88;border-color:transparent;background:radial-gradient(#0a1224,#000)}
.profile-highlights a:hover span::before{content:"";position:absolute;inset:-3px;border-radius:50%;padding:2px;background:conic-gradient(from var(--ang),#2e6bff,#c7dbff,#2e6bff);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:ring-spin 1.5s linear infinite}
.profile-scroll{align-self:center;color:var(--muted);font-size:.75rem;letter-spacing:.2em;text-decoration:none;animation:bob 1.8s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(6px)}}
@media (prefers-reduced-motion:reduce){.profile *,.profile::before,.profile *::before,.profile *::after{animation:none!important}}