/*
  Animaciones sutiles (micro‑interacciones) para OWH
  - Hover en menú (subrayado + glow)
  - Hover en botones y tarjetas (elevación suave)
  - Aparición al hacer scroll (IntersectionObserver en main.js)
  - Respeta prefers-reduced-motion
*/

:root{
  --anim-fast: 160ms;
  --anim-med: 220ms;
  --anim-ease: cubic-bezier(.2,.8,.2,1);
}

/* Menú principal: subrayado animado (solo links, no CTA) */
.header .nav a{
  position: relative;
  transition: color var(--anim-fast) var(--anim-ease),
              background var(--anim-fast) var(--anim-ease),
              transform var(--anim-fast) var(--anim-ease),
              text-shadow var(--anim-fast) var(--anim-ease);
}

.header .nav a:not(.nav__cta)::after{
  content:"";
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 6px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(87,162,255,.95), rgba(244,177,30,.90));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--anim-fast) var(--anim-ease);
  opacity: .95;
}

.header .nav a:not(.nav__cta):hover{
  transform: translateY(-1px);
  text-shadow: 0 0 18px rgba(87,162,255,.18);
}

.header .nav a:not(.nav__cta):hover::after{
  transform: scaleX(1);
}

/* Botones */
.btn,
.iconbtn,
.chip,
.link{
  transition: transform var(--anim-fast) var(--anim-ease),
              box-shadow var(--anim-fast) var(--anim-ease),
              filter var(--anim-fast) var(--anim-ease),
              background var(--anim-fast) var(--anim-ease),
              border-color var(--anim-fast) var(--anim-ease);
}

.btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 48px rgba(0,0,0,.40);
  filter: brightness(1.06);
}

.btn--ghost:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(0,0,0,.32);
}

.iconbtn:hover{
  transform: translateY(-2px);
}

.chip:hover{
  transform: translateY(-1px);
}

/* Cards */
.pro-service,
.pro-stat,
.tile,
.post,
.feature,
.productcard,
.cataloghead,
.cta-strip{
  transition: transform var(--anim-med) var(--anim-ease),
              box-shadow var(--anim-med) var(--anim-ease),
              background var(--anim-med) var(--anim-ease),
              border-color var(--anim-med) var(--anim-ease),
              filter var(--anim-med) var(--anim-ease);
}

.pro-service:hover,
.pro-stat:hover,
.tile:hover,
.post:hover,
.productcard:hover{
  transform: translateY(-6px);
  box-shadow: 0 26px 70px rgba(0,0,0,.45);
  border-color: rgba(120,180,255,.26);
}

.feature:hover{
  transform: translateY(-4px);
  box-shadow: 0 26px 70px rgba(0,0,0,.35);
}

/* Aparición al hacer scroll */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms var(--anim-ease), transform 520ms var(--anim-ease);
  will-change: opacity, transform;
}

.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Accesibilidad: respeta preferencias de movimiento reducido */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior: auto !important; }
  .reveal{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .btn,
  .iconbtn,
  .chip,
  .link,
  .pro-service,
  .pro-stat,
  .tile,
  .post,
  .feature,
  .productcard,
  .cataloghead,
  .cta-strip,
  .header .nav a{
    transition: none !important;
    transform: none !important;
  }
  .header .nav a::after{ display:none !important; }
}