/* Hecho a Máquina · movimiento común (pareja de movimiento.js). Solo transform y opacity en lo que se anima;
   las variables de color se toman de cada sitio (--texto o --tinta, --naranja). Sin JS o con movimiento reducido: estado final. */
html.mov{scroll-behavior:smooth}

/* apariciones al entrar en pantalla */
.mov .aparece{opacity:0;transform:translateY(22px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.mov .aparece.visto{opacity:1;transform:none}
.mov h2.aparece{transform:translateX(-18px)}
.mov h2.aparece.visto{transform:none}

/* el logo saluda al cargar: la nave cae y el tejado naranja «se enciende» */
@keyframes hm-logo{0%{transform:translateY(-6px) rotate(-4deg);opacity:0}55%{transform:translateY(1px) rotate(1deg);opacity:1}75%{transform:translateY(-1px) rotate(0)}100%{transform:none}}
@keyframes hm-tejado{0%,60%{opacity:.25}75%{opacity:1}85%{opacity:.6}100%{opacity:1}}
.marca svg{transform-origin:50% 100%;animation:hm-logo .7s cubic-bezier(.3,.7,.3,1.2) .1s both}
.marca svg path[fill="#FF5A1F"]{animation:hm-tejado 1.1s ease-out .2s both}
.marca:hover svg{animation:hm-logo .5s cubic-bezier(.3,.7,.3,1.2) both}

/* botones: el botón baja hacia su sombra al pulsar; al pasar, se levanta */
.boton{transition:transform .14s cubic-bezier(.2,.7,.2,1),box-shadow .14s cubic-bezier(.2,.7,.2,1)}

/* tarjetas enlazadas: se levantan y la sombra dura de la marca se desplaza */
a.tarjeta{transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s cubic-bezier(.2,.7,.2,1)}
a.tarjeta:hover{transform:translate(-3px,-4px);box-shadow:6px 8px 0 var(--naranja,#FF5A1F)}
a.tarjeta:active{transform:translate(0,0);box-shadow:0 1px 0 var(--naranja,#FF5A1F);transition-duration:.06s}
a.tarjeta .ir span,a .flecha{display:inline-block;transition:transform .2s cubic-bezier(.2,.7,.2,1)}
a.tarjeta:hover .ir span{transform:translateX(4px)}

/* subrayado animado (enlaces de una línea: menús, pies, «Ver…») */
.subraya{text-decoration:none;position:relative}
.subraya::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--naranja,#FF5A1F);
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .28s cubic-bezier(.2,.7,.2,1)}
.subraya:hover::after,.subraya:focus-visible::after,.subraya[aria-current="page"]::after{transform:scaleX(1);transform-origin:0 50%}

@media (prefers-reduced-motion:reduce){
  html.mov{scroll-behavior:auto}
  .marca svg,.marca svg path{animation:none!important}
  a.tarjeta:hover{transform:none}
}
@media print{.mov .aparece{opacity:1!important;transform:none!important}}