/* Portfolio motion and spatial layout. Content remains visible without JavaScript. */
.portfolio-page{--page-progress:0;--scene-x:0deg;--scene-y:0deg;--scene-scroll:0px;overflow-x:clip}
.portfolio-page .header{position:relative;z-index:5}
.portfolio-page .header nav{scrollbar-width:none}.portfolio-page .header nav::-webkit-scrollbar{display:none}
.scroll-progress{position:fixed;top:0;left:0;width:100%;height:3px;z-index:20;pointer-events:none;background:rgba(52,216,255,.08)}
.scroll-progress span{display:block;width:100%;height:100%;transform:scaleX(var(--page-progress));transform-origin:left;background:linear-gradient(90deg,#34d8ff,#a083ff,#34d8ff);box-shadow:0 0 14px rgba(52,216,255,.8)}
.portfolio-page .hero{min-height:min(850px,100svh);grid-template-columns:1.08fr .92fr;gap:clamp(20px,4vw,80px)}
.portfolio-page .hero h1{font-size:clamp(68px,8vw,122px);line-height:.95}
.portfolio-page .hero-copy{z-index:2}
.portfolio-page .hero-copy::before{content:"01 / IDENTIDAD";display:block;color:rgba(130,204,223,.55);font:600 10px 'Space Grotesk',sans-serif;letter-spacing:.24em;margin-bottom:24px}
.portfolio-scene{height:min(540px,48vw);min-height:380px;position:relative;display:grid;place-items:center;perspective:1100px;isolation:isolate;transform-style:preserve-3d;background:none}
.portfolio-scene::before{display:none!important}
.scene-grid{display:none!important}
.scene-orbit{display:none!important}
.scene-core{transform-style:preserve-3d;position:absolute;display:grid;place-items:center;will-change:transform;width:clamp(190px,22vw,270px);aspect-ratio:1;min-width:145px;border-radius:0;padding:0;background:transparent;box-shadow:none;border:none;transform:translateZ(95px) translateY(var(--scene-scroll)) rotateY(var(--scene-y))}
.scene-core-inner{width:100%;height:100%;border-radius:0;overflow:visible;background:transparent;box-shadow:none;display:grid;place-items:center}
.scene-core img{width:100%;height:100%;object-fit:contain;border-radius:0;filter:drop-shadow(0 0 35px rgba(52,216,255,.45))}
.scene-label{position:absolute;font:600 10px 'Space Grotesk',sans-serif;letter-spacing:.22em;color:#83b9cb;text-shadow:0 0 15px #02040a;white-space:nowrap}
.scene-label-top{top:4%;right:0}.scene-label-bottom{bottom:4%;left:0}
.portfolio-page .section{position:relative;isolation:isolate}
.portfolio-page .section::before{content:"";position:absolute;left:max(20px,calc((100% - 1180px)/2));top:0;width:1px;height:100%;background:linear-gradient(transparent,rgba(52,216,255,.22),transparent);pointer-events:none}
.portfolio-page .section>.shell{position:relative}
.portfolio-page .card{transform-style:preserve-3d;position:relative;overflow:hidden}
.portfolio-page .project::before{content:"";position:absolute;inset:0;background:radial-gradient(360px circle at var(--shine-x,50%) var(--shine-y,0%),rgba(52,216,255,.13),transparent 65%);opacity:0;transition:opacity .3s;pointer-events:none}
.portfolio-page .project:hover::before{opacity:1}
.portfolio-page .card>*{position:relative;transform:translateZ(18px)}
.portfolio-page .project h3{font-size:clamp(25px,2.6vw,34px)}
.portfolio-page .resume-list li{position:relative;padding-left:22px}
.portfolio-page .resume-list li::before{content:"";position:absolute;left:0;top:22px;width:6px;height:6px;border-radius:50%;background:#34d8ff;box-shadow:0 0 14px #34d8ff}
.portfolio-page .profile .large{font-size:clamp(19px,2vw,25px)}
.portfolio-page.js-motion .reveal{opacity:0;transform:perspective(1000px) translate3d(0,42px,-45px) rotateX(5deg);filter:blur(5px);transition:opacity .75s ease,transform .85s cubic-bezier(.2,.7,.2,1),filter .8s ease;transition-delay:var(--reveal-delay,0ms)}
.portfolio-page.js-motion .reveal.is-visible{opacity:1;transform:perspective(1000px) translate3d(0,0,0) rotateX(0deg);filter:blur(0)}
.portfolio-page.js-motion .card.reveal{transform:perspective(1000px) translate3d(0,45px,-65px) rotateX(7deg)}
.portfolio-page.js-motion .card.reveal.is-visible{transform:perspective(1000px) translate3d(0,0,0) rotateX(0deg)}
.portfolio-page.js-motion .card.reveal.is-visible:hover{transform:perspective(1000px) translateY(-5px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}
@media(min-width:901px){.portfolio-page #perfil .profile>div:first-child,.portfolio-page #experiencia .profile>div:first-child{position:sticky;top:34px;align-self:start}}
@media(max-width:900px){.portfolio-page .hero{grid-template-columns:1fr;gap:0}.portfolio-scene{height:360px;min-height:0;width:min(100%,480px);margin:0 auto}.portfolio-page .hero h1{font-size:clamp(62px,12vw,100px)}}
@media(max-width:600px){.portfolio-page .hero{padding-top:54px}.portfolio-scene{height:280px}.scene-core{min-width:110px}.scene-label{font-size:8px}.portfolio-page .section::before{left:12px}.portfolio-page .card>*{transform:none}}
@media(prefers-reduced-motion:reduce){.portfolio-page.js-motion .reveal,.portfolio-page.js-motion .card.reveal{opacity:1;transform:none;filter:none;transition:none}.portfolio-page.js-motion .card.reveal.is-visible:hover{transform:none}.scene-orbit,.scene-core{will-change:auto}.scroll-progress span{transition:none}}

/* A pinned narrative: scroll advances the content and rotates the spatial object. */
.scroll-story{position:relative;background:radial-gradient(circle at 20% 50%,rgba(23,70,92,.28),transparent 50%),#050910;border-block:1px solid rgba(52,216,255,.16)}
.story-sticky{position:sticky;top:0;height:100svh;min-height:620px;display:grid;place-items:center;overflow:hidden}
.story-space{height:300svh}
.story-shell{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(24px,6vw,100px);height:100%}
.story-visual{height:min(64vh,610px);min-height:350px;position:relative;perspective:900px;transform-style:preserve-3d;display:grid;place-items:center}
.story-visual::before{content:"";position:absolute;width:85%;aspect-ratio:1;border:1px solid rgba(52,216,255,.12);border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 45px,rgba(52,216,255,.1) 46px,transparent 47px);transform:rotateX(68deg) translateZ(-90px)}
.story-halo{position:absolute;width:80%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(52,216,255,.24),rgba(98,42,200,.13) 45%,transparent 70%);filter:blur(28px)}
.story-outer,.story-inner,.story-axis{position:absolute;width:67%;aspect-ratio:1;border:2px solid rgba(52,216,255,.75);border-radius:50%;box-shadow:0 0 25px rgba(52,216,255,.28),inset 0 0 20px rgba(52,216,255,.15);transition:transform .65s cubic-bezier(.2,.7,.2,1),border-color .65s}
.story-outer{transform:rotateX(66deg) rotateY(var(--story-angle,0deg)) rotateZ(25deg)}
.story-inner{width:52%;border-color:rgba(172,125,255,.75);transform:rotateX(-55deg) rotateY(var(--story-angle-reverse,0deg)) rotateZ(60deg)}
.story-axis{width:38%;border-style:dashed;border-width:1px;transform:rotateX(12deg) rotateY(var(--story-angle,0deg)) translateZ(65px)}
.story-center{width:28%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#08222d,#121130);border:1px solid rgba(160,233,255,.75);box-shadow:0 0 40px rgba(52,216,255,.3),inset 0 0 28px rgba(52,216,255,.18);font:700 clamp(32px,5vw,72px) 'Space Grotesk',sans-serif;letter-spacing:-.08em;transform:translateZ(95px) rotateY(var(--story-angle,0deg));transition:transform .65s,box-shadow .65s}
.scroll-story[data-step="1"] .story-outer{border-color:rgba(255,153,97,.78)}.scroll-story[data-step="1"] .story-center{box-shadow:0 0 45px rgba(255,153,97,.35),inset 0 0 28px rgba(255,153,97,.2)}
.scroll-story[data-step="2"] .story-outer{border-color:rgba(146,255,188,.78)}.scroll-story[data-step="3"] .story-outer{border-color:rgba(189,150,255,.8)}
.story-copy{position:relative;z-index:1}.story-copy>.eyebrow{margin-bottom:32px}.story-panels{position:relative;min-height:300px}.story-panel{margin-bottom:40px}.story-index{font:600 11px 'Space Grotesk',sans-serif;letter-spacing:.2em;color:#83b9cb}.story-panel h2{font-size:clamp(44px,5vw,76px);margin:14px 0 22px}.story-panel p{font-size:clamp(17px,1.5vw,21px);color:#b5c8d1;line-height:1.65;max-width:520px}.story-panel a{display:inline-block;margin-top:10px;color:#34d8ff;font-weight:700}
.story-dots{display:flex;gap:10px;margin-top:25px}.story-dots span{width:28px;height:3px;background:#315361;transition:width .4s,background .4s}.story-dots .is-active{width:58px;background:#34d8ff;box-shadow:0 0 12px #34d8ff}
.scroll-story.story-live .story-panel{position:absolute;inset:0;opacity:0;visibility:hidden;transform:translate3d(0,24px,-30px) rotateX(5deg);transition:opacity .5s,transform .65s,visibility .5s;pointer-events:none}
.scroll-story.story-live .story-panel.is-active{opacity:1;visibility:visible;transform:translate3d(0,0,0) rotateX(0deg);pointer-events:auto}
@media(max-width:800px){.story-sticky{min-height:0;height:100svh}.story-shell{grid-template-columns:1fr;grid-template-rows:42% 58%;gap:0}.story-visual{height:100%;min-height:0;width:min(100%,400px);margin:auto}.story-copy>.eyebrow{margin-bottom:15px}.story-panels{min-height:220px}.story-panel h2{font-size:clamp(38px,9vw,58px);margin:8px 0 12px}.story-panel p{font-size:15px;line-height:1.5}.story-dots{margin-top:4px}}
@media(max-width:450px){.story-shell{grid-template-rows:36% 64%}.story-copy>.eyebrow{font-size:9px}.story-panels{min-height:270px}}
@media(prefers-reduced-motion:reduce){.scroll-story.story-live .story-panel{transition:none;transform:none}.story-outer,.story-inner,.story-axis,.story-center,.story-dots span{transition:none}}