/* ============================================================
   11 · ANIMACIONES FLUIDAS Y NO INVASIVAS
   Micro-interacciones sutiles que dan sensación premium sin
   distraer ni ralentizar. Todo respeta prefers-reduced-motion.
   ============================================================ */

/* --- Aparición suave al entrar en pantalla (scroll reveal) --- */
[data-reveal]{opacity:0;transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
[data-reveal].is-visible{opacity:1;transform:translateY(0)}
/* Retardo escalonado para grupos (tarjetas, listas) */
[data-reveal-delay="1"]{transition-delay:.08s}
[data-reveal-delay="2"]{transition-delay:.16s}
[data-reveal-delay="3"]{transition-delay:.24s}
[data-reveal-delay="4"]{transition-delay:.32s}

/* --- Hover refinado en tarjetas (catálogo, blog, planes) --- */
.cat-card,.blog-card,.plan-card{
  transition:transform .28s cubic-bezier(.22,.61,.36,1),
             box-shadow .28s cubic-bezier(.22,.61,.36,1),
             border-color .28s}
.cat-card:hover,.blog-card:hover,.plan-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.45)}

/* --- Imágenes de tarjeta: zoom sutil al hover --- */
.cat-card__img,.blog-card__img{overflow:hidden}
.cat-card__img img,.blog-card__img img{
  transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.cat-card:hover .cat-card__img img,
.blog-card:hover .blog-card__img img{transform:scale(1.05)}

/* --- Enlaces de navegación: subrayado que crece desde el centro --- */
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:50%;bottom:-4px;
  width:0;height:2px;background:var(--accent);
  transition:width .26s ease,left .26s ease}
.nav-links a:hover::after{width:100%;left:0}

/* --- Botones: elevación suave y consistente --- */
.btn,.plan-cta,.cta-btn{
  transition:transform .18s ease,box-shadow .18s ease,
             background var(--tune),color var(--tune)}
.btn:hover,.plan-cta:hover,.cta-btn:hover{transform:translateY(-2px)}
.btn:active,.plan-cta:active,.cta-btn:active{transform:translateY(0)}

/* --- Respeto total a quien prefiere menos movimiento --- */
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1;transform:none;transition:none}
  .cat-card:hover,.blog-card:hover,.plan-card:hover{transform:none}
  .cat-card:hover .cat-card__img img,
  .blog-card:hover .blog-card__img img{transform:none}
}