/* ZUMOTEC: movimiento. Los estados iniciales solo existen con .js-motion (lo pone el tema si no hay reduced-motion). */

/* Contadores y bloque de cifras */
.z-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;text-align:center}
.z-stat{background:var(--z-superficie);border-radius:var(--z-radio-lg);padding:28px 16px}
.z-stat .z-contador,.z-stat .z-num{display:block;font-size:clamp(2.6rem,6vw,4rem);font-weight:300;line-height:1;color:var(--z-azul)}
.z-stat span:last-child{display:block;margin-top:8px;font-weight:600;color:var(--z-azul-profundo)}
@media (max-width:767px){.z-stats{grid-template-columns:1fr}}

/* Aparición */
.js-motion .z-reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease var(--d,0ms),transform .6s cubic-bezier(.2,.7,.2,1) var(--d,0ms)}
.js-motion .z-reveal.z-in{opacity:1;transform:none}

/* Lazo "e": se dibuja de izquierda a derecha y luego flota */
.js-motion .z-hero__fondo{clip-path:inset(0 100% 0 0);animation:z-lazo-in 1.5s cubic-bezier(.65,0,.2,1) .25s forwards,z-flota 7s ease-in-out 1.9s infinite}
@keyframes z-lazo-in{to{clip-path:inset(0 0 0 0)}}
@keyframes z-flota{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12px) rotate(-1.5deg)}}
.js-motion .z-hero__lazo{position:relative}
.js-motion .z-hero__lazo::before{content:"";position:absolute;inset:12% 8%;background:radial-gradient(closest-side,rgba(130,174,255,.35),transparent);filter:blur(10px);z-index:-1;animation:z-pulso 6s ease-in-out infinite}
@keyframes z-pulso{0%,100%{opacity:.5;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}}

/* Hover (solo dispositivos con puntero) */
@media (hover:hover){
  .z-tarjeta,.z-linea,.z-stat,.z-card,.woocommerce ul.products li.product{transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
  .z-tarjeta:hover,.z-linea:hover,.z-stat:hover,.z-card:hover,.woocommerce ul.products li.product:hover{transform:translateY(-6px);box-shadow:0 14px 30px rgba(0,61,107,.14)}
  .z-linea--salud:hover{border-color:var(--z-azul-profundo)}
  .woocommerce ul.products li.product a.woocommerce-LoopProduct-link{display:block;overflow:hidden;border-radius:16px}
  .woocommerce ul.products li.product img{transition:transform .5s ease}
  .woocommerce ul.products li.product:hover img{transform:scale(1.05)}
  .z-btn,.woocommerce a.button,.woocommerce button.button{transition:background .2s,color .2s,transform .2s,box-shadow .2s}
  .z-btn:hover,.woocommerce a.button:hover,.woocommerce button.button:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(0,61,107,.22)}
  .z-confianza li{transition:transform .2s,background .2s}
  .z-confianza li:hover{transform:translateY(-3px);background:var(--z-superficie)}
}

/* Línea de tiempo: pista + relleno que crece con el scroll */
.z-tiempo{position:relative;border-left:0;--p:1}
.z-tiempo::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:2px;background:#D5E3F7}
.z-tiempo::after{content:"";position:absolute;left:0;top:0;width:4px;border-radius:2px;background:var(--z-azul);height:calc(var(--p) * 100%)}
.z-tiempo li::before{z-index:1}
.z-tiempo.z-tl-anim li{opacity:.45;transform:translateX(8px);transition:opacity .45s ease,transform .45s ease}
.z-tiempo.z-tl-anim li::before{border-color:#9DB8DD;background:#fff;transition:background .3s,border-color .3s,transform .3s}
.z-tiempo.z-tl-anim li.on{opacity:1;transform:none}
.z-tiempo.z-tl-anim li.on::before{border-color:var(--z-azul);background:var(--z-azul);transform:scale(1.15)}

/* Respeto total a "reducir movimiento" */
@media (prefers-reduced-motion:reduce){
  .z-hero__fondo{animation:none!important;clip-path:none!important;transform:none!important}
  .z-reveal,.z-hero__lazo::before,.z-tiempo li{animation:none!important;transition:none!important;opacity:1!important;transform:none!important;clip-path:none!important}
}