@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}
@keyframes rise{from{opacity:0;translate:0 40px}to{opacity:1;translate:0 0}}
@keyframes drop{from{translate:0 -100%}to{translate:0 0}}
@keyframes wordmark{from{translate:0 105%}to{translate:0 0}}
@keyframes zoom{from{scale:1.25}to{scale:1}}
@keyframes track{from{letter-spacing:.25em;opacity:0}to{letter-spacing:0;opacity:1}}
@keyframes pop{from{opacity:0;scale:.9;translate:0 30px}to{opacity:1;scale:1;translate:0 0}}

/* HOME: una secuencia de entrada orquestada */
.hero{background:#05070d!important;--py:0px}
.hero::before{content:"";position:absolute;inset:clamp(70px,13vw,210px) 0 0 0;background:url(../img/hero-mano.jpg) 40% 28%/cover;z-index:0;translate:0 var(--py);animation:zoom 2.2s cubic-bezier(.16,.8,.2,1) both;will-change:translate,scale;-webkit-mask-image:linear-gradient(transparent,#000 24%);mask-image:linear-gradient(transparent,#000 24%)}
nav{animation:drop .7s cubic-bezier(.2,.8,.2,1) both}
.marca{overflow:hidden}
.marca img{animation:wordmark 1.2s cubic-bezier(.16,.9,.2,1) .25s both}
.intro p{animation:rise .8s cubic-bezier(.2,.8,.2,1) 1s both}
.intro .btn:nth-of-type(1){animation:rise .8s cubic-bezier(.2,.8,.2,1) 1.15s both}
.intro .btn:nth-of-type(2){animation:rise .8s cubic-bezier(.2,.8,.2,1) 1.3s both}

/* botones: barrido de color al pasar */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .2s,color .3s!important}
.btn::after{content:"";position:absolute;inset:0;background:#000;z-index:-1;translate:-101% 0;transition:translate .4s cubic-bezier(.2,.8,.2,1)}
.btn.claro::after,.btn.negro::after{background:var(--azul-f)}
.btn:hover::after,.btn:focus-visible::after{translate:0 0}
.btn:hover,.btn:focus-visible,.btn.negro:hover{color:#fff}

/* cinta: se frena al pasar el mouse */
.cinta:hover .pista{animation-play-state:paused}

/* aparición al hacer scroll (solo unos pocos elementos) */
.js .rv{opacity:0;translate:0 50px;transition:opacity .9s,translate 1s cubic-bezier(.16,.9,.2,1)}
.js .rv.in{opacity:1;translate:0 0}
.js .sobre img.rv{opacity:1;translate:0 0;clip-path:inset(100% 0 0 0 round 28px);transition:clip-path 1.3s cubic-bezier(.7,0,.2,1)}
.js .sobre img.rv.in{clip-path:inset(0 0 0 0 round 28px)}
.js .gran.rv{opacity:1;translate:0 0}
.js .gran.rv img{transform:translateY(110%);transition:transform 1.4s cubic-bezier(.16,.9,.2,1)}
.js .gran.rv.in img{transform:translateY(38%)}

/* tarjetas del carrusel */
.card{transition:transform .5s cubic-bezier(.2,.8,.2,1),filter .3s}
.card:hover{transform:scale(.97) rotate(-.8deg)}
.card span{transition:translate .3s}.card:hover span{translate:6px -4px}

/* PÁGINAS INTERNAS */
h1{animation:track .9s cubic-bezier(.2,.8,.2,1) .15s both}
.lead{animation:rise .8s cubic-bezier(.2,.8,.2,1) .35s both}
.pj,.jg,.hg{animation:pop .8s cubic-bezier(.2,.8,.2,1) calc(.5s + var(--i,0)*.12s) both}

@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
 .js .rv,.js .gran.rv img{opacity:1;translate:0 0;clip-path:none}.js .gran.rv img{transform:translateY(38%)}
}

/* foco visible sobre cualquier fondo */
a:focus-visible,button:focus-visible{outline:3px solid #000!important;outline-offset:3px;box-shadow:0 0 0 6px #fff}