:root { --ink:#08111f; --blue:#1464ff; --mint:#4be0a8; --yellow:#fff229; --paper:#f3f5f7; --serif: 'Manrope', sans-serif; --mono:'DM Mono', monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--ink); }
body { margin:0; color:var(--ink); font-family:var(--serif); overflow-x:hidden; background:var(--paper); }
a { color:inherit; }
.skip-link { background:#fff; color:#000; left:1rem; padding:.65rem 1rem; position:fixed; top:-4rem; z-index:2000; }.skip-link:focus{top:1rem}
.site-header { align-items:center; display:flex; justify-content:space-between; left:0; padding:1.4rem clamp(1.25rem,4vw,4.5rem); pointer-events:none; position:fixed; right:0; top:0; z-index:1040; mix-blend-mode:difference; color:#fff; }
.brand { font:500 1.45rem/1 var(--mono); letter-spacing:-.1em; pointer-events:auto; text-decoration:none; }.brand span{color:var(--yellow)}


.menu-toggle {
    align-items: center;
    background: var(--yellow);
    border: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 8px 8px 8px;
    pointer-events: auto;
    border-radius: 4px;
}

.menu-toggle i { font-size:1.5rem; } .menu-toggle span { background:currentColor; display:block; height:2px; width:28px; } .menu-toggle span:last-child{width:18px;align-self:flex-end}

.offcanvas { --bs-offcanvas-width:min(100vw, 430px); background:#08111f!important; }.offcanvas-header{padding:1.7rem 2rem}.menu-links{display:flex;flex-direction:column;padding:1.5rem 2rem 2rem}.menu-links>a{color:#fff;font-size:clamp(2rem,5vw,3.25rem);font-weight:700;letter-spacing:-.075em;line-height:1.15;padding:.28rem 0;text-decoration:none}.menu-links>a:hover{color:var(--yellow)}.menu-social{border-top:1px solid rgba(255,255,255,.25);display:flex;flex-wrap:wrap;gap:.7rem 1.3rem;margin-top:auto;padding-top:1.5rem}.menu-social a{color:#c4cbd4;font:400 .75rem var(--mono);text-decoration:none}
.scene { isolation:isolate; min-height:100vh; min-height:100svh; overflow:hidden; position:relative; scroll-margin-top:0; }.scene-content { min-height:100vh; min-height:100svh; padding-bottom:clamp(3rem,7vh,6rem); padding-top:clamp(6.5rem,13vh,10rem); position:relative; z-index:4; }
.scene--video { color:#fff; background:#151d25; }.scene-video { height:100%; left:0; object-fit:cover; position:absolute; top:0; width:100%; z-index:-3; }.video-shade{background:linear-gradient(110deg,rgba(3,8,16,.78),rgba(3,8,16,.32) 55%,rgba(3,8,16,.67));inset:0;position:absolute;z-index:-2}.video-shade--blue{background:linear-gradient(115deg,rgba(12,29,97,.82),rgba(0,50,117,.32)),linear-gradient(0deg,rgba(0,0,0,.55),transparent 70%)}.video-shade--warm{background:linear-gradient(115deg,rgba(27,11,3,.85),rgba(128,36,0,.25)),linear-gradient(0deg,rgba(0,0,0,.5),transparent 70%)}.video-shade--audiovisual{background:linear-gradient(105deg,rgba(3,9,16,.88),rgba(3,9,16,.48) 58%,rgba(3,9,16,.75))}
.eyebrow { font:500 .72rem/1.3 var(--mono); letter-spacing:.12em; margin-bottom:1.25rem; text-transform:uppercase; }.display-title,.contact-title { font-size:clamp(3.1rem,7vw,7.4rem); font-weight:800; letter-spacing:-.09em; line-height:.92; margin:0; }.hero h1{color:#fff;font-size:clamp(4.5rem,11vw,11.5rem);font-weight:700;letter-spacing:-.09em;line-height:.78;margin:0}

.hero h1 em{color:var(--yellow);font-style:normal}

.lead{font-size:clamp(1.1rem,1.5vw,1.35rem);line-height:1.55;max-width:25rem}.button { align-items:center; border-radius:99px; display:inline-flex; font-size:.9rem; font-weight:700; gap:2rem; margin-top:1.6rem; padding:.88rem 1.25rem  .88rem 1.5rem; text-decoration:none; transition:transform .25s,background .25s,color .25s; }.button:hover{transform:translateY(-4px)}.button span{font-size:1.25rem;line-height:.8}

.button--light{background:#fff;color:var(--ink)}
.button--dark{background:var(--ink);color:#fff}
.button--yellow{background:var(--yellow);color:var(--ink)}
.button--blue{background:var(--blue);color:#fff}
.button--mint{background:var(--mint);color:var(--ink)}

.text-link{border-bottom:1px solid currentColor;display:inline-flex;font:500 .82rem var(--mono);gap:2rem;margin-top:2rem;padding-bottom:.65rem;text-decoration:none}.text-link:hover{color:var(--yellow)}.scroll-cue { align-items:center; bottom:2.25rem; color:#fff; display:flex; font:400 .65rem var(--mono); gap:.8rem; left:clamp(1.25rem,4vw,4.5rem); letter-spacing:.08em; position:absolute; text-decoration:none; text-transform:uppercase; z-index:5; }.scroll-cue i{border:1px solid currentColor;border-radius:99px;height:28px;position:relative;width:16px}.scroll-cue i:after{background:currentColor;border-radius:5px;content:'';height:5px;left:5px;position:absolute;top:6px;width:4px;animation:scrollDot 1.6s infinite}@keyframes scrollDot{70%{transform:translateY(9px);opacity:0}100%{opacity:0}}

.orb,.depth-shape,.depth-ring,.social-blob,.contact-orb { pointer-events:none; position:absolute; }
.orb--hero-one{background:#2f44ff;border-radius:50%;filter:blur(1px);height:30vw;right:-10vw;top:8vh;width:30vw;z-index:-1;opacity:.7;animation:drift 5s ease-in-out infinite}
.orb--reel{border:1px solid rgba(255,255,255,.4);border-radius:50%;height:80vw;right:-42vw;top:-20vw;width:80vw;z-index:-1}

.grid-lines{background-image:linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);background-size:7vw 7vw;bottom:-25%;height:50%;position:absolute;right:-10%;transform:perspective(400px) rotateX(60deg);width:110%;z-index:-1}@keyframes drift{50%{transform:translate3d(-5vw,4vw,0) scale(1.09)}}
.reel .scene-content{padding-bottom:12vh}.scene--light{background:#f6f7f8}.scene--cream{background:#f3efe9}.scene--blue{background:#1459e8;color:#fff}.scene--green{background:var(--mint)}.scene--dark{background:var(--ink)}.scene--yellow{background:var(--yellow)}.scene--soft{background:#edf1f5}.body-copy{font-size:clamp(1.1rem,1.55vw,1.45rem);line-height:1.55;margin:1.75rem 0 0;max-width:35rem}.depth-word{color:rgba(8,17,31,.035);font-size:min(29vw,28rem);font-weight:800;letter-spacing:-.15em;line-height:1;position:absolute;right:-.08em;top:4%;z-index:-1}.depth-shape--red{background:#ff3933;border-radius:50%;bottom:10%;height:20vw;max-height:300px;max-width:300px;right:6%;transform:translateZ(-50px);width:20vw;animation:drift 9s ease-in-out infinite reverse}.service-list{border-top:1px solid rgba(8,17,31,.25)}.service-list article{align-items:baseline;border-bottom:1px solid rgba(8,17,31,.25);display:grid;grid-template-columns:3rem 1fr;gap:0 .7rem;padding:1rem 0}.service-list span{font:400 .7rem var(--mono);grid-row:1/3}.service-list h3{font-size:1.28rem;font-weight:700;letter-spacing:-.04em;margin:0}.service-list p{font-size:.9rem;grid-column:2;margin:.25rem 0 0}.audiovisual .depth-word{color:rgba(255,255,255,.06)}.audiovisual .service-list{border-color:rgba(255,255,255,.34)}.audiovisual .service-list article{border-color:rgba(255,255,255,.34)}.audiovisual .service-list h3{color:#fff}.audiovisual .service-list p{color:#c6d0dc}
.section-heading{align-items:end;display:flex;justify-content:space-between;margin-bottom:1rem}.work-carousel .scene-content{display:flex;flex-direction:column;justify-content:center}.carousel{position:relative;z-index:2}.project-card{align-items:center;display:grid;grid-template-columns:1fr .8fr;gap:clamp(1.5rem,6vw,7rem);margin:auto;max-width:65rem;padding:1.25rem 0}.project-image-wrap{background:rgba(255,255,255,.1);border-radius:1.5rem;height:min(46vh,480px);overflow:hidden;padding:1.5rem;text-align:center}.project-image-wrap img{height:100%;max-width:100%;object-fit:contain}.project-meta{align-self:center}.project-meta p{color:#b8d1ff;font:400 .75rem var(--mono);letter-spacing:.1em;text-transform:uppercase}.project-meta h3{font-size:clamp(1.8rem,4vw,4rem);font-weight:700;letter-spacing:-.08em;line-height:.95;margin:.7rem 0 1rem}.project-meta a{color:#fff;font:500 .8rem var(--mono);text-decoration:none}.project-meta a:hover{color:var(--yellow)}.carousel-controls{align-items:center;display:flex;gap:1rem;justify-content:center;margin-top:.5rem}.carousel-controls button{background:transparent;border:1px solid rgba(255,255,255,.5);border-radius:50%;color:white;font-size:1.15rem;height:38px;width:38px}.carousel-controls button:hover{background:var(--yellow);border-color:var(--yellow);color:var(--ink)}.carousel-controls span{font:400 .7rem var(--mono);min-width:3.7rem;text-align:center}.loading-card{font:400 .8rem var(--mono);padding:8rem 0;text-align:center}.depth-ring{border:1px solid rgba(255,255,255,.22);border-radius:50%;bottom:-43vw;height:75vw;left:-30vw;width:75vw;z-index:0}
.depth-shape--yellow{background:var(--yellow);border-radius:50%;height:24vw;left:9%;top:12%;width:24vw;z-index:0}.graphic-design .scene-content{z-index:2}.floating-art{filter:drop-shadow(0 2rem 2rem rgba(8,17,31,.18));max-height:67vh;max-width:100%;position:relative}.art-phone{display:block;margin:auto;transform:rotate(7deg);animation:floatArt 7s ease-in-out infinite}@keyframes floatArt{50%{transform:translateY(-16px) rotate(3deg)}}.ux-line{border:1px solid rgba(8,17,31,.32);border-radius:50%;bottom:-60vh;height:115vh;position:absolute;right:-30vw;width:105vw}.art-phone--white{transform:rotate(-7deg);animation-name:floatArtWhite}@keyframes floatArtWhite{50%{transform:translateY(-16px) rotate(-3deg)}}.web-art{filter:drop-shadow(1rem 1.5rem 0 rgba(75,224,168,.18));max-width:115%;position:relative;transform:translateX(4%)}.code-particle{color:var(--mint);font:500 clamp(3rem,10vw,9rem) var(--mono);opacity:.15;position:absolute}.code-particle--one{right:7%;top:10%;transform:rotate(12deg)}.code-particle--two{bottom:8%;left:5%;transform:rotate(-16deg)}
.print-video .scene-content{padding-bottom:15vh}.depth-shape--blue{background:var(--blue);border-radius:50%;height:32vw;left:-10vw;top:-14vw;width:32vw}.print-art{filter:drop-shadow(1rem 2rem 0 rgba(8,17,31,.12));max-width:100%;position:relative;transform:rotate(-3deg)}.social-blob{background:url('../fuentes/redes-fondo.png') center/contain no-repeat;height:min(100%,900px);opacity:.7;right:-25%;top:0;width:min(100%,1000px)}.social-art{display:block;filter:drop-shadow(1.2rem 1.8rem 0 rgba(20,100,255,.14));margin:auto;max-height:69vh;max-width:100%;position:relative;transform:rotate(5deg)}
.photo-carousel{background:#101821}.photo-carousel .carousel-inner{height:100%}.photo-slide{height:100%;position:relative}.photo-slide:after{background:linear-gradient(90deg,rgba(2,8,15,.72),transparent 65%),linear-gradient(0deg,rgba(2,8,15,.45),transparent 45%);content:'';inset:0;position:absolute}.photo-slide img{height:100%;object-fit:cover;width:100%}.photo-overlay{bottom:clamp(3rem,10vh,8rem);left:clamp(1.25rem,8vw,10rem);position:absolute;z-index:3}.photo-counter{color:#fff;display:block;font:400 .75rem var(--mono);letter-spacing:.1em;margin-top:2rem}.loading-photo{align-items:center;background:#101821;color:#fff;display:flex;font:400 .8rem var(--mono);height:100%;justify-content:center}
.contact .scene-content{display:flex;flex-direction:column;justify-content:center}.contact-title{font-size:clamp(3.2rem,8vw,8.5rem);position:relative;z-index:1}.contact-note{font-size:1.15rem;line-height:1.55;max-width:22rem}.contact-links{border-top:1px solid rgba(8,17,31,.25);display:grid;margin-top:1.8rem}.contact-links a{border-bottom:1px solid rgba(8,17,31,.25);font-size:1.05rem;font-weight:700;padding:.6rem 0;text-decoration:none}.contact-links a:hover{color:var(--blue)}.contact-orb{background:var(--yellow);border-radius:50%;height:min(32vw,380px);left:45%;top:9%;width:min(32vw,380px);z-index:0}footer{border-top:1px solid rgba(8,17,31,.25);display:flex;font:400 .68rem var(--mono);justify-content:space-between;margin-top:auto;padding-top:1.2rem;position:relative;z-index:2}footer a{text-decoration:none}footer a:hover{color:var(--blue)}
.skills .scene-content{display:flex;flex-direction:column;justify-content:center}.skills .display-title span{color:var(--mint)}.skills-intro{color:#b7c2d0;font-size:1.05rem;line-height:1.55;margin:1.65rem 0 0;max-width:24rem}.skills-list{border-top:1px solid rgba(255,255,255,.22);list-style:none;margin:0;padding:0}.skills-list li{align-items:center;border-bottom:1px solid rgba(255,255,255,.22);display:grid;gap:1rem;grid-template-columns:minmax(0,1fr) auto;padding:.54rem 0}.skills-list li>span{color:#fff;font-size:clamp(.76rem,1.2vw,.95rem);font-weight:600;letter-spacing:-.02em}.skills-list b{color:var(--mint);font:400 clamp(.5rem,.9vw,.68rem) var(--mono);letter-spacing:.08em;white-space:nowrap}.skills footer{border-color:rgba(255,255,255,.22);color:#aeb8c7}.skills footer a:hover{color:var(--mint)}.skills-glow{background:var(--blue);border-radius:50%;filter:blur(8px);height:min(34vw,430px);opacity:.22;position:absolute;right:-10vw;top:-10vw;width:min(34vw,430px)}
@media (max-width:991.98px){.scene-content{padding-left:1.5rem;padding-right:1.5rem}.section-heading{align-items:flex-start;gap:1rem;flex-direction:column}.project-card{grid-template-columns:1fr;gap:1rem;max-width:31rem}.project-image-wrap{height:40vh}.project-meta{text-align:center}.depth-shape--red{height:40vw;width:40vw}.art-phone{max-height:52vh}.web-art{max-width:100%;transform:none}.social-blob{right:-55%;width:110%}}
@media (max-width:575.98px){.scene-content{padding-bottom:2.5rem;padding-top:5.5rem}.hero-content{padding-bottom:6.5rem}.hero h1{font-size:clamp(3.8rem,19vw,6rem)}.display-title{font-size:clamp(2.9rem,14vw,4.5rem)}.lead{font-size:1rem}.scroll-cue{bottom:1.45rem}.button{font-size:.8rem;margin-top:1.25rem}.reel .scene-content,.print-video .scene-content{padding-bottom:8vh}.orb--hero-one{height:68vw;right:-22vw;top:19vh;width:68vw}.project-image-wrap{height:35vh;padding:.75rem}.project-meta h3{font-size:2.25rem}.depth-shape--yellow{height:55vw;left:-16vw;top:8%;width:55vw}.graphic-design .row,.ux .row{position:relative}.graphic-design .floating-art{margin-top:-1rem;max-height:37vh}.ux .art-phone{max-height:43vh}.web-art{margin-top:1rem}.print-art{margin-top:-1rem}.social-art{max-height:45vh}.photo-overlay{bottom:4rem;left:1.5rem}.contact-orb{height:60vw;left:40%;top:11%;width:60vw}footer{font-size:.58rem}.service-list article{padding:.8rem 0}.skills .scene-content{padding-bottom:1.25rem;padding-top:4.6rem}.skills .display-title{font-size:clamp(2.3rem,12vw,3.4rem)}.skills-intro{font-size:.87rem;margin-top:.9rem}.skills-list li{gap:.5rem;padding:.37rem 0}.skills-list li>span{font-size:.67rem}.skills-list b{font-size:.42rem;letter-spacing:.04em}.skills footer{margin-top:.8rem;padding-top:.8rem}}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.scene-video{display:none}.scene--video{background-position:center;background-size:cover}.hero{background-image:linear-gradient(rgba(3,8,16,.7),rgba(3,8,16,.5)),url('../images/trabajo2.jpg')}.reel{background-image:linear-gradient(rgba(3,8,16,.65),rgba(3,8,16,.3)),url('../images/1.jpg')}.audiovisual{background-image:linear-gradient(rgba(3,8,16,.7),rgba(3,8,16,.5)),url('../images/1.jpg')}.print-video{background-image:linear-gradient(rgba(3,8,16,.65),rgba(3,8,16,.3)),url('../images/3.jpg')}}


#photoCarousel .carousel-item {
  transition-duration: 1.5s !important; 
}

/* Asegurarnos de que la foto no se salga del contenedor al hacer zoom */
#photoCarousel {
  overflow: hidden;
}

/* Estado inicial de la imagen */
#photoCarousel .carousel-item img {
  transform: scale(1) rotate(0deg);
  transform-origin: center center; /* Para que el zoom sea desde el centro */
}

/* Cuando el item está activo o entrando en la transición, disparamos la animación */
#photoCarousel .carousel-item.active img,
#photoCarousel .carousel-item-next img,
#photoCarousel .carousel-item-prev img {
  /* Duración de 6s para cubrir los 3.8s de pausa + 1.5s de fundido */
  animation: movimientoSutil 6s ease-out forwards;
}

/* Definición del movimiento sutil */
@keyframes movimientoSutil {
  0% {
    transform: scale(1) rotate(0deg);
  }
  100% {
    transform: scale(1.04) rotate(0.8deg); /* Zoom del 4% y rotación de medio grado */
  }
}