/* Animaciones de entrada por scroll y microinteracciones · Grupo Épico
   Vive aparte de epico.css: nunca declara opacity:0 en el estado base,
   eso lo agrega anim.js con la clase .ep-arm y solo cuando confirma que
   va a poder revelar el elemento (ver anim.js). Si este archivo no carga,
   el sitio se ve exactamente igual, solo que sin el fundido de entrada.
   prefers-reduced-motion ya lo apaga todo desde epico.css (*{transition:
   none!important}); aquí no hace falta repetirlo.
   Rendimiento: solo se anima opacity y transform, nunca height/top/box-shadow. */

/* ---------- entrada por scroll ---------- */
.ep-arm{
	opacity:0;
	transform:translateY(20px);
	transition:opacity .6s cubic-bezier(.16,.84,.44,1),transform .6s cubic-bezier(.16,.84,.44,1);
}
.ep-arm.ep-in{opacity:1;transform:none}

/* ---------- botones: hundimiento apenas perceptible al presionar ---------- */
.btn{transition:background .18s,color .18s,border-color .18s,transform .12s ease}
.btn:active{transform:scale(.97)}

/* ---------- tarjetas de proyecto y de blog: se levantan un poco al pasar el mouse ----------
   El acercamiento de la foto (.card__im img / .post__im img) ya vive en
   epico.css; aquí solo se agrega el levantamiento de la tarjeta completa. */
.card{transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.card:hover,.card:focus-visible{transform:translateY(-6px)}

/* ---------- enlaces dentro del cuerpo del blog: subrayado que crece desde la izquierda ----------
   El resto del sitio usa .lnk (ya trae su propio subrayado fijo) o clases
   de botón; esto es solo para los enlaces sueltos dentro del artículo. */
.art__c a{position:relative;text-decoration:none}
.art__c a::after{
	content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:currentColor;
	transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.2,1);
}
.art__c a:hover::after,.art__c a:focus-visible::after{transform:scaleX(1)}

/* ---------- iconos de redes de la barra superior: giro y escala mínima ---------- */
.tb__soc a svg{transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.tb__soc a:hover svg,.tb__soc a:focus-visible svg{transform:rotate(10deg) scale(1.12)}

/* ---------- cifras que cuentan: que los dígitos no bailen de ancho mientras suben ---------- */
.cta2__cif b,.pj-datos dd{font-variant-numeric:tabular-nums}

/* ---------- burbuja de WhatsApp: un latido la primera vez que aparece, nunca más ---------- */
@keyframes ep-wa-lat{0%,100%{transform:scale(1)}30%{transform:scale(1.16)}55%{transform:scale(.94)}80%{transform:scale(1.05)}}
.ep-wa-lat{animation:ep-wa-lat 1s ease-in-out 1}