/* ONLYDROP v22 — tema collage y navegación. Se carga después de styles.css. */
:root{--cobalt:#4d63a0;--sky:#5f95b8;--amber:#c9894f;--maroon:#8a4452;--ink:#0c0e13;--ink2:#151820;--peach:#d1b5a3;--yellow:#cbbf6a;--txt:#e4e6ea}
html body,body .views{background:var(--ink);color:var(--txt)}

/* barra superior */
body .topbar{background:rgba(12,14,19,.82);border-bottom:2px solid var(--sky);backdrop-filter:blur(10px)}
body .wordmark{font-family:'UnifrakturCook','Grenze Gotisch',serif;font-size:30px;font-weight:700;letter-spacing:0;color:var(--txt);text-shadow:2px 2px 0 var(--cobalt)}
body .wordmark span{color:var(--sky)}body .wordmark i{color:var(--amber)}
body .top-note{color:var(--sky);opacity:.8}
body .nav a{color:var(--txt);font-weight:700;padding:6px 12px;transform:skewX(-14deg);transition:background .2s,color .2s,translate .35s cubic-bezier(.2,1.6,.4,1)}
body .nav a:after{display:none}
body .nav a:hover,body .nav a.active{background:var(--sky);color:var(--ink)}
body .menu-toggle,body .motion-toggle{color:var(--txt);border-color:var(--sky);background:transparent}

/* INDEX — sin patrón grande: solo resplandores */
body .index-screen{background:radial-gradient(ellipse 55% 50% at 28% 18%,rgba(95,149,184,.18),transparent 70%),radial-gradient(ellipse 45% 45% at 88% 72%,rgba(138,68,82,.16),transparent 70%),var(--ink)}
body .index-screen:before{content:none}
body .deco-hud-frame{display:none}
.od-collage{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.od-collage>*{position:absolute;will-change:translate}
.od-city{left:10%;top:-2%;width:80%;height:66%;object-fit:cover;opacity:.62;filter:saturate(1.25) contrast(1.1);
  -webkit-mask-image:radial-gradient(ellipse 52% 58% at 52% 46%,#000 30%,transparent 100%);mask-image:radial-gradient(ellipse 52% 58% at 52% 46%,#000 30%,transparent 100%);
  translate:calc(var(--parallax-x,0px)*-1.4) calc(var(--parallax-y,0px)*-1.2);animation:odDrift 24s ease-in-out infinite}
.od-fog{inset:0;background:radial-gradient(ellipse 40% 22% at 18% 60%,rgba(120,100,210,.16),transparent 70%),radial-gradient(ellipse 45% 18% at 72% 64%,rgba(95,149,184,.14),transparent 70%)}
.od-helmet{left:54%;top:3%;width:clamp(150px,19vw,300px);mix-blend-mode:screen;filter:invert(1) hue-rotate(180deg) saturate(.85) contrast(1.05);
  translate:calc(var(--parallax-x,0px)*3.2) calc(var(--parallax-y,0px)*2.6);rotate:-5deg;animation:odBob 6s ease-in-out infinite}
.od-slash{pointer-events:none;animation:odSlash 7s ease-in-out infinite alternate;translate:calc(var(--parallax-x,0px)*5) 0}
.od-slash.s1{right:7%;top:-6%;width:5.5vw;height:76%;background:var(--sky);clip-path:polygon(30% 0,100% 0,68% 100%,0 100%);rotate:13deg}
.od-slash.s2{right:2%;top:-4%;width:2.4vw;height:104%;background:var(--cobalt);clip-path:polygon(0 0,100% 6%,60% 100%,10% 92%);rotate:-5deg;animation-delay:-2s}
.od-slash.s3{left:-3%;bottom:15%;width:30vw;height:1.3vw;background:var(--amber);clip-path:polygon(0 40%,100% 0,95% 100%,3% 72%);rotate:-8deg;animation-delay:-4s}
.od-tribal{left:-2%;bottom:2%;width:32%;opacity:.55;translate:calc(var(--parallax-x,0px)*-2) 0}
.od-cross{width:34px;height:34px;background:linear-gradient(var(--yellow),var(--yellow)) center/100% 3px no-repeat,linear-gradient(var(--yellow),var(--yellow)) center/3px 100% no-repeat;animation:odSpin 14s linear infinite}
.od-cross.c1{left:5%;top:20%}.od-cross.c2{left:8%;top:27%;scale:.7;animation-duration:9s}.od-cross.c3{left:6%;top:36%;scale:.5;animation-duration:20s}
.od-spark{right:17%;top:9%;width:92px;height:92px;background:linear-gradient(var(--peach),var(--peach)) center/100% 2px no-repeat,linear-gradient(var(--peach),var(--peach)) center/2px 100% no-repeat;filter:drop-shadow(0 0 8px var(--peach));animation:odPulse 2.6s ease-in-out infinite}
.od-spark:after{content:"";position:absolute;inset:34%;background:#fff;transform:rotate(45deg);box-shadow:0 0 16px 5px var(--peach)}
.od-pixel{right:7%;top:27%;font:clamp(30px,5.2vw,84px)/.9 'Press Start 2P',monospace;color:var(--maroon);letter-spacing:-.06em;text-shadow:4px 4px 0 var(--cobalt);animation:odGlitch 5s steps(1) infinite}
.od-hud{right:21%;top:16%;text-align:right;font:800 clamp(10px,1.15vw,17px)/1.3 'Sora',sans-serif;letter-spacing:-.06em;color:var(--sky)}
.od-hud b{display:block;color:var(--amber);font-size:1.25em}
.od-hud em{font-style:normal;font-family:'DM Mono',monospace;font-weight:500;letter-spacing:0;font-size:.82em}
.od-plus-corner{font:300 34px/1 'Sora',sans-serif;color:rgba(95,149,184,.6)}.od-plus-corner.tl{left:1.5%;top:2%}.od-plus-corner.br{right:1.5%;bottom:2%}

/* texto de portada: asimétrico, titular roto en diagonal */
body .index-topline,body .index-footer,body .menu-heading,body .index-meta,body .index-kicker,body .index-alias{color:var(--sky)}
body .menu-heading span:last-child,body .index-kicker span,body .index-footer a{color:var(--amber)}
body .index-intro{grid-template-columns:minmax(0,1.6fr) minmax(220px,.5fr);align-items:end}
body .index-intro h1{font:800 clamp(52px,9vw,128px)/.88 'Sora',sans-serif;letter-spacing:-.08em;color:var(--txt);rotate:-2.5deg;transform-origin:left bottom;margin-bottom:-1.5vh;position:relative;z-index:5;
  text-shadow:4px 4px 0 var(--cobalt),8px 8px 0 rgba(95,149,184,.35);animation:odH1 .9s cubic-bezier(.2,1,.3,1) backwards}
body .index-intro h1 span{font-family:'UnifrakturCook','Grenze Gotisch',serif;font-weight:700;letter-spacing:0;color:var(--peach);text-shadow:4px 4px 0 var(--maroon)}
body .index-description{translate:0 -3vh;rotate:1.5deg}
body .index-description p{color:var(--txt);font-weight:500;background:rgba(12,14,19,.7);padding:8px 10px;border-left:3px solid var(--amber)}
body .index-3d-stage,body .index-spark{display:none}

/* tarjetas: tamaños, cortes e inclinaciones distintos */
body .category-menu{grid-template-columns:1.5fr .8fr 1.2fr .9fr 1.35fr;gap:clamp(6px,1vw,16px)}
body .category-card{border:0;background:var(--ink2);box-shadow:none;--s:1;transform:perspective(900px) rotateX(var(--card-rotate-x,0deg)) rotateY(var(--card-rotate-y,0deg)) scale(var(--s));
  transition:transform .3s cubic-bezier(.2,1.5,.4,1),rotate .45s cubic-bezier(.3,1.7,.4,1),filter .2s;animation:none}
body .category-card:nth-child(1){clip-path:polygon(0 5%,100% 0,100% 94%,5% 100%);rotate:-2.2deg;margin:0 0 22px}
body .category-card:nth-child(2){clip-path:polygon(7% 0,100% 6%,93% 100%,0 95%);rotate:1.8deg;margin:34px 0 0}
body .category-card:nth-child(3){clip-path:polygon(0 0,94% 5%,100% 100%,6% 93%);rotate:-1deg;margin:8px 0 30px}
body .category-card:nth-child(4){clip-path:polygon(5% 5%,100% 0,95% 96%,0 100%);rotate:2.4deg;margin:46px 0 0}
body .category-card:nth-child(5){clip-path:polygon(0 3%,100% 0,100% 100%,9% 97%);rotate:-1.6deg;margin:14px 0 14px}
body .category-card:hover{--s:1.07;rotate:0deg;z-index:8;filter:brightness(1.08);background:var(--ink2);box-shadow:none}
body .category-card:before{content:"";position:absolute;left:0;right:0;top:0;height:6px;z-index:6;background:linear-gradient(90deg,var(--sky),var(--amber));transform-origin:left;scale:.2 1;transition:scale .4s cubic-bezier(.2,1.4,.3,1)}
body .category-card:hover:before{scale:1 1}
body .category-info{background:var(--ink2);border-top:0}
body .category-info h2{letter-spacing:-.05em;font-weight:800}
body .category-arrow{color:var(--amber);transition:transform .3s cubic-bezier(.2,1.8,.4,1)}
body .category-card:hover .category-arrow{transform:translate(6px,-6px) scale(1.4) rotate(8deg)}

/* WORK oscuro y roto */
body .view-panel>.work-section{background:radial-gradient(ellipse 45% 35% at 85% 8%,rgba(95,149,184,.22),transparent 70%),radial-gradient(ellipse 40% 40% at 10% 85%,rgba(138,68,82,.16),transparent 70%),var(--ink);color:var(--txt)}
body .work-section h2,body .work-section h3,body .work-section .eyebrow,body .back-index,body .section-aside,body .project-type,body .replace-note,body .work-topline{color:var(--txt)}
body .work-section .eyebrow,body .project-type{color:var(--sky)}
body .work-section h2{font:800 clamp(40px,7vw,96px)/.9 'Sora',sans-serif;letter-spacing:-.08em;rotate:-1.5deg;text-shadow:3px 3px 0 var(--cobalt)}
body .filter{border:2px solid var(--sky);color:var(--txt);border-radius:0;font-weight:700;background:transparent;transform:skewX(-12deg);transition:transform .25s cubic-bezier(.2,1.6,.4,1),background .15s,color .15s}
body .filter:hover{transform:skewX(-12deg) translateY(-4px) scale(1.06)}
body .filter:hover,body .filter.active,body .filter.is-active,body .filter[aria-pressed="true"]{background:var(--sky);color:var(--ink)}
body .project-card{border-radius:0;transition:transform .3s cubic-bezier(.2,1.5,.4,1),rotate .4s cubic-bezier(.3,1.7,.4,1)}
body .project-card:nth-child(2){margin-top:46px;rotate:1.2deg}body .project-card:nth-child(3){margin-top:-10px;rotate:-1deg}
body .project-card:nth-child(4){margin-top:30px;rotate:1.5deg}body .project-card:nth-child(5){rotate:-1.2deg}body .project-card:nth-child(6){margin-top:54px;rotate:.8deg}
body .project-card:hover{transform:scale(1.04);rotate:0deg;z-index:5}
body .project-image{border:0;box-shadow:none;clip-path:polygon(0 0,100% 3%,100% 100%,4% 97%)}

/* ABOUT / CONTACT: ciudad velada */
body .view-panel>.about-section,body .view-panel>.contact-section{background:linear-gradient(105deg,rgba(12,14,19,.92),rgba(12,14,19,.7) 55%,rgba(77,99,160,.4)),url(assets/art/city.webp) center/cover;color:var(--txt)}
body .about-section h2,body .contact-section h2{font-family:'Sora',sans-serif;font-weight:800;letter-spacing:-.08em;rotate:-2deg}
body .about-section h2 em,body .contact-section h2 em{font-style:normal;font-family:'UnifrakturCook',serif;letter-spacing:0;color:var(--peach)}
body .contact-email{color:var(--peach);text-shadow:3px 3px 0 var(--maroon);transition:translate .35s cubic-bezier(.2,1.6,.4,1)}
body .contact-stamp,body .about-decoration{color:var(--sky);font-family:'Press Start 2P',monospace}
body .skills span{border:1px solid var(--peach);color:var(--peach);transition:transform .25s cubic-bezier(.2,1.8,.4,1)}body .skills span:hover{transform:rotate(-4deg) scale(1.15)}
body .project-dialog{background:var(--ink2);color:var(--txt);border:2px solid var(--sky);clip-path:polygon(0 0,100% 2%,98% 100%,2% 98%)}
body .project-dialog[open]{animation:odPop .5s cubic-bezier(.2,1.3,.3,1)}

/* capa de juice: cursor, FX, transición */
.od-wipe{position:fixed;inset:0;z-index:200;pointer-events:none}
.od-wipe i{position:absolute;inset:0;clip-path:polygon(0 0,0 0,-20% 100%,-20% 100%)}
.od-wipe.go i{animation:odWipe .75s cubic-bezier(.7,0,.3,1)}
.od-wipe i:nth-child(1){background:var(--sky)}.od-wipe i:nth-child(2){background:var(--amber);animation-delay:.07s}.od-wipe i:nth-child(3){background:var(--ink);animation-delay:.14s}
.od-in{animation:odPop .75s cubic-bezier(.2,1,.3,1) backwards;animation-delay:calc(var(--i,0)*65ms + .25s)}
.od-punch{animation:odPunch .3s cubic-bezier(.2,1.6,.4,1)}
@keyframes odPop{0%{opacity:0;transform:translateY(70px) scale(.7) rotate(6deg)}60%{opacity:1;transform:translateY(-10px) scale(1.05)}}
@keyframes odWipe{0%{clip-path:polygon(0 0,0 0,-20% 100%,-20% 100%)}45%{clip-path:polygon(0 0,120% 0,100% 100%,-20% 100%)}100%{clip-path:polygon(120% 0,120% 0,100% 100%,100% 100%)}}
@keyframes odPunch{0%{scale:1}35%{scale:.985;filter:saturate(1.6)}100%{scale:1}}
@keyframes odH1{from{clip-path:inset(0 100% 0 0);translate:-40px 0;filter:blur(8px)}}
@keyframes odGlitch{0%,92%,100%{translate:0}93%{translate:-4px 1px;text-shadow:-3px 0 var(--sky),3px 0 var(--maroon)}95%{translate:5px -2px;text-shadow:3px 0 var(--sky),-3px 0 var(--amber)}97%{translate:-2px 0}}
@keyframes odDrift{0%,100%{transform:scale(1.02)}50%{transform:scale(1.07) translate(-1%,1%)}}
@keyframes odBob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(3deg)}}
@keyframes odSlash{from{transform:translateY(-1.5%)}to{transform:translateY(2%) skewY(2deg)}}
@keyframes odSpin{to{transform:rotate(360deg)}}
@keyframes odPulse{0%,100%{opacity:.6;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
@media (max-width:760px){
  .od-city{left:-10%;width:120%;height:34%}.od-helmet{left:58%;top:3%;width:34vw}
  .od-hud,.od-pixel,.od-spark{display:none}
  body .category-menu{grid-template-columns:1fr 1fr}
  body .category-card:nth-child(n){margin:0;rotate:0deg}
  body .wordmark{font-size:26px}
}
@media (prefers-reduced-motion:reduce){.od-city,.od-helmet,.od-slash,.od-cross,.od-spark,.od-pixel{animation:none}.od-wipe,{display:none}}
html.motion-paused .od-city,html.motion-paused .od-helmet,html.motion-paused .od-slash,html.motion-paused .od-cross,html.motion-paused .od-pixel{animation-play-state:paused}

/* ===== FX y navegación integrada ===== */
.grain{display:none!important}
body .index-screen::after,body .index-screen:after{content:none!important}
.view-panel.enter-next,.view-panel.enter-prev{animation:none!important}

/* ===== navegación integrada: sin barra, piezas flotantes ===== */
@media (min-width:761px){
  body{display:block}
  body .topbar{position:fixed;left:0;right:0;top:0;height:0;min-height:0;padding:0;border:0;background:none;backdrop-filter:none;z-index:120;pointer-events:none;display:block}
  body .topbar>*{pointer-events:auto}
  body .views{position:fixed;inset:0;height:auto;flex:none}
  body .wordmark{position:absolute;left:2.4vw;top:1.4vh;font-size:clamp(34px,3.8vw,56px);rotate:-5deg;transform-origin:left bottom;text-shadow:3px 3px 0 var(--cobalt),6px 6px 0 rgba(95,149,184,.3);transition:rotate .4s cubic-bezier(.3,1.8,.4,1),scale .3s}
  body .wordmark:hover{rotate:2deg;scale:1.1}
  body .top-note{position:absolute;left:1vw;top:50%;margin:0;writing-mode:vertical-rl;rotate:180deg;translate:0 50%;font-size:9px;letter-spacing:.3em;color:var(--sky);opacity:.65}
  body .nav{position:absolute;right:2.2vw;top:2vh;display:flex;gap:10px;align-items:flex-start}
  body .nav a{background:var(--ink);border:2px solid var(--sky);padding:7px 14px;font-size:11px;transform:skewX(-14deg)}
  body .nav a:nth-child(2){border-color:var(--amber);margin-top:14px}body .nav a:nth-child(3){border-color:var(--maroon);margin-top:4px}
  body .nav a:hover,body .nav a.active{background:var(--sky);color:var(--ink);scale:1.12;rotate:-2deg}
  body .nav a:nth-child(2):hover,body .nav a:nth-child(2).active{background:var(--amber)}body .nav a:nth-child(3):hover,body .nav a:nth-child(3).active{background:var(--maroon);color:#fff}
  body .motion-toggle{position:absolute;right:2.2vw;bottom:2.4vh;top:auto;rotate:-4deg;background:var(--ink);z-index:130}
  body .index-screen{padding-top:clamp(64px,10vh,92px)}
  body .view-panel>.about-section,body .view-panel>.contact-section{padding-top:92px}
}

/* ===== secciones a pantalla completa, cada una con estructura propia ===== */
.od-in{animation-name:odPop}
[data-cat=animation2d] .od-in{animation-name:odInX}[data-cat=animation3d] .od-in{animation-name:odInZ}
[data-cat=art2d] .od-in{animation-name:odInDrop}[data-cat=storyboard] .od-in{animation-name:odInClip}
[data-cat=projects] .od-in{animation-name:odInRow}[data-cat=about] .od-in{animation-name:odInX}[data-cat=contact] .od-in{animation-name:odInZ}
[data-cat=animation2d]{--ca:odF2d}[data-cat=animation3d]{--ca:odF3d}[data-cat=art2d]{--ca:odFart}[data-cat=storyboard]{--ca:odFst}[data-cat=projects]{--ca:odFpr}
@keyframes odInX{from{opacity:0;translate:-14vw 0;rotate:-6deg}}
@keyframes odInZ{from{opacity:0;scale:.4;filter:blur(12px)}}
@keyframes odInDrop{from{opacity:0;translate:0 -60vh;rotate:20deg}}
@keyframes odInClip{from{opacity:0;clip-path:inset(0 0 100% 0)}}
@keyframes odInRow{from{opacity:0;translate:30vw 0;scale:1 .2}}
@keyframes odF2d{from{clip-path:inset(0 100% 0 0);translate:-8vw 0}}
@keyframes odF3d{from{opacity:0;transform:perspective(900px) translateZ(-800px) rotateY(70deg)}}
@keyframes odFart{from{opacity:0;translate:0 -80vh;rotate:-25deg;scale:1.4}}
@keyframes odFst{from{clip-path:inset(50% 50% 50% 50%)}}
@keyframes odFpr{from{opacity:0;transform:translateX(-60vw) skewX(30deg)}}

@media (min-width:761px){
#work .work-section{display:grid;column-gap:3vw;row-gap:2vh;align-content:start;min-height:100%;padding:92px 4vw 6vh}
#work .work-topline{grid-area:top}#work .section-heading{grid-area:head;display:block}#work .category-switcher{grid-area:sw}
#work .project-grid{grid-area:grid;display:grid;grid-template-columns:1fr}#work .work-quote{grid-area:q}#work .replace-note{grid-area:note}
#work .project-grid .project-card{grid-column:auto;grid-row:auto;margin:0}

/* 2D: columna lateral + tiras de fotogramas en cascada */
#work[data-cat=animation2d] .work-section,#work[data-cat=projects] .work-section{grid-template-columns:minmax(220px,27vw) 1fr;grid-template-areas:"top top" "head grid" "sw grid" "q grid" "note grid";grid-template-rows:auto auto auto auto 1fr}
#work[data-cat=animation2d] .category-switcher,#work[data-cat=projects] .category-switcher{flex-direction:column;align-items:flex-start}
#work[data-cat=animation2d] .project-grid{gap:6vh;padding:2vh 2vw;border-inline:10px dotted var(--sky)}
#work[data-cat=animation2d] .project-card:nth-child(odd){margin-right:9vw;rotate:-1.5deg}#work[data-cat=animation2d] .project-card:nth-child(even){margin-left:9vw;rotate:1.5deg}

/* 3D: título centrado y objeto en perspectiva */
#work[data-cat=animation3d] .work-section{grid-template-columns:1fr;grid-template-areas:"top" "head" "sw" "grid" "q" "note";justify-items:center}
#work[data-cat=animation3d] .section-heading{text-align:center}#work[data-cat=animation3d] .category-switcher{justify-content:center}
#work[data-cat=animation3d] .work-section h2{font-size:clamp(56px,10vw,150px);rotate:0deg}
#work[data-cat=animation3d] .project-grid{perspective:1200px;justify-items:center;width:min(70vw,900px)}
#work[data-cat=animation3d] .project-card{transform:rotateY(-14deg) rotateX(4deg);width:100%}
#work[data-cat=animation3d] .project-card:hover{transform:rotateY(0) rotateX(0) scale(1.04)}

/* Arte 2D: collage superpuesto con el título montado encima */
#work[data-cat=art2d] .work-section{grid-template-columns:1fr;grid-template-areas:"top" "grid" "head" "sw" "q" "note"}
#work[data-cat=art2d] .project-grid{display:flex;flex-wrap:wrap;justify-content:center;padding:2vh 0}
#work[data-cat=art2d] .project-card{width:46vw;margin:0 -3vw!important}
#work[data-cat=art2d] .project-card:nth-child(odd){rotate:-4deg}#work[data-cat=art2d] .project-card:nth-child(even){rotate:3deg;translate:0 6vh}
#work[data-cat=art2d] .section-heading{justify-self:end;margin-top:-9vh;z-index:6;rotate:-4deg}
#work[data-cat=art2d] .work-section h2{font-size:clamp(56px,11vw,170px)}

/* Storyboard: viñeta panorámica con título como barra de pie */
#work[data-cat=storyboard] .work-section{grid-template-columns:1fr;grid-template-areas:"top" "grid" "head" "sw" "q" "note"}
#work[data-cat=storyboard] .project-card{border:10px solid #f3efe6;background:#f3efe6;rotate:-.6deg}
#work[data-cat=storyboard] .section-heading{background:var(--maroon);padding:2vh 2vw;rotate:1deg;margin-top:-2vh;z-index:5}

/* Proyectos: índice vertical con números gigantes */
#work[data-cat=projects] .project-grid{gap:2.5vh;counter-reset:p}
#work[data-cat=projects] .project-card{counter-increment:p;position:relative;rotate:0deg;border-bottom:2px solid var(--sky);padding-bottom:2vh}
#work[data-cat=projects] .project-card:before{content:counter(p,decimal-leading-zero);position:absolute;right:1vw;top:50%;translate:0 -50%;font:800 clamp(70px,10vw,170px)/1 'Sora',sans-serif;letter-spacing:-.08em;color:transparent;-webkit-text-stroke:2px rgba(95,149,184,.45);z-index:0;pointer-events:none}
#work[data-cat=projects] .project-open{display:grid;grid-template-columns:minmax(0,40%) 1fr;gap:2vw;align-items:center;width:100%;text-align:left;position:relative;z-index:1}
#work[data-cat=projects] .project-card:nth-child(odd) .project-open{grid-template-columns:1fr minmax(0,40%)}
#work[data-cat=projects] .project-card:nth-child(odd) .project-image{order:2}

/* About: pantalla dividida, retrato a sangre */
#about .about-section{display:grid;grid-template-columns:minmax(260px,42vw) 1fr;grid-template-rows:auto 1fr auto;gap:0;padding:0!important;align-items:start;min-height:100%}
#about .about-portrait{grid-column:1;grid-row:1/4;margin:0;height:100%;clip-path:polygon(0 0,100% 0,84% 100%,0 100%)}
#about .portrait-tech-frame{height:100%}#about .portrait-tech-frame img{width:100%;height:100%;object-fit:cover}
#about .about-label{grid-column:2;grid-row:1;padding:92px 4vw 0}
#about .about-content{grid-column:2;grid-row:2;padding:2vh 4vw;align-self:center}
#about .about-decoration{grid-column:2;grid-row:3;padding:0 4vw 5vh;justify-self:end;rotate:-4deg}
#about .about-section h2{font-size:clamp(40px,6vw,96px)}

/* Contact: tipografía gigante apilada abajo */
#contact .contact-section{display:flex;flex-direction:column;justify-content:flex-end;gap:3vh;min-height:100%;padding:92px 4vw 7vh!important}
#contact .contact-top{margin-bottom:auto}
#contact .contact-section h2{font-size:clamp(56px,11.5vw,190px);line-height:.84;rotate:-3deg;transform-origin:left bottom}
#contact .contact-email{font-size:clamp(22px,4.6vw,72px);letter-spacing:-.06em;rotate:-1.5deg}
#contact .contact-stamp{position:absolute;right:5vw;top:24vh;font-size:clamp(14px,2vw,30px);rotate:12deg;border:3px solid var(--sky);padding:1.2vw}
}

/* ===== v13: menos degradados, colores apagados, feedback sutil ===== */
body .index-screen{background:var(--ink)}
body .view-panel>.work-section{background:var(--ink)}
body .view-panel>.about-section,body .view-panel>.contact-section{background:linear-gradient(rgba(12,14,19,.88),rgba(12,14,19,.88)),url(assets/art/city.webp) center/cover}
.od-fog{display:none}
.od-city{-webkit-mask-image:none;mask-image:none;clip-path:polygon(5% 10%,100% 0,93% 76%,68% 100%,0 88%);opacity:.6;filter:saturate(.7) contrast(1.05)}
body .category-card:before{background:var(--sky)}
body .category-visual,body .project-image{filter:saturate(.55)}
body .category-card:hover{--s:1.03}
body .category-card:hover .category-arrow{transform:translate(4px,-4px)}
body .wordmark:hover{scale:1}
.od-punch{animation:none}
.od-in{animation-duration:1.2s;animation-delay:calc(var(--i,0)*110ms + var(--base,.9s))}
.od-pre.od-go{animation-duration:1.4s}

/* riel fijo de secciones (no se mueve nunca) */
.topbar{z-index:230}
@media (max-width:760px){.od-rail{display:none}}
@media (min-width:761px){
  body .nav,body .top-note,#work .category-switcher{display:none}
  body .index-screen,#work .work-section,#contact .contact-section{padding-left:calc(3vw + 152px)!important}
}

/* animaciones de reestructuración más amplias y visibles */
@keyframes odPop{0%{opacity:0;transform:translateY(120px) scale(.5) rotate(10deg)}60%{opacity:1;transform:translateY(-16px) scale(1.06)}}
@keyframes odInX{from{opacity:0;translate:-30vw 0;rotate:-12deg}}
@keyframes odInZ{from{opacity:0;scale:.2;filter:blur(18px)}}
@keyframes odInDrop{from{opacity:0;translate:0 -90vh;rotate:35deg}}
@keyframes odInClip{from{opacity:0;clip-path:inset(0 0 100% 0);translate:0 8vh}}
@keyframes odInRow{from{opacity:0;translate:60vw 0;scale:1 .1}}
@keyframes odF2d{from{clip-path:inset(0 100% 0 0);translate:-20vw 0}}
@keyframes odF3d{from{opacity:0;transform:perspective(900px) translateZ(-1400px) rotateY(100deg)}}
@keyframes odFart{from{opacity:0;translate:0 -110vh;rotate:-40deg;scale:1.8}}
@keyframes odFst{from{clip-path:inset(50% 50% 50% 50%)}}
@keyframes odFpr{from{opacity:0;transform:translateX(-90vw) skewX(45deg)}}

/* ===== v14: riel con nombres + título estilo Persona 5 ===== */
.od-rail{position:fixed;left:12px;top:50%;translate:0 -50%;z-index:230;display:flex;flex-direction:column;gap:6px}
.od-rail a{display:block;width:134px;padding:9px 12px;background:var(--ink2);border-left:6px solid var(--c);color:var(--txt);transform:skewX(-10deg);transition:background .15s,color .15s}
.od-rail a span{display:block;font:800 11px/1 'Sora',sans-serif;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.od-rail a:hover,.od-rail a.on{background:var(--c);color:var(--ink)}