/* ============================================================
   wow.css — Index Technologies · Equipamientos Group: logo que se dibuja, hero 3D, tipografía cinética y vapor/copos
   Usa las variables de app.css (--negro, --negro-2, --disp) y las de WOW_CFG.colores (--wow-*)
   ============================================================ */

/* ---------- logo que se dibuja (portada) ---------- */
.wow-draw .wd-t,.wow-draw .wd-r{stroke-dasharray:var(--wl);stroke-dashoffset:var(--wl)}
.wow-fin .wd-r,.wow-fin .wd-t{animation:none!important;stroke-dashoffset:0!important;fill-opacity:1!important;stroke-opacity:0!important}
.wow-draw .wd-t{animation:wdTrazo 1.25s cubic-bezier(.65,.05,.35,1) var(--wd) forwards}
.wow-draw .wd-r{fill-opacity:0;stroke-linejoin:round;animation:wdTrazo 1.25s cubic-bezier(.65,.05,.35,1) var(--wd) forwards,wdRelleno .75s ease calc(var(--wd) + .95s) forwards}
.wow-draw text.wd-r{stroke-dasharray:none;stroke-dashoffset:0;animation:wdTexto 1.2s ease var(--wd) forwards,wdRelleno .75s ease calc(var(--wd) + .8s) forwards}
@keyframes wdTrazo{to{stroke-dashoffset:0}}
@keyframes wdRelleno{to{fill-opacity:1;stroke-opacity:0}}
@keyframes wdTexto{from{stroke-opacity:0;letter-spacing:.3em}to{stroke-opacity:1}}

/* ---------- hero ---------- */
.wow-hero{--wow-a:#fff;--wow-b:#fff;--wow-glow:rgba(255,255,255,.18);--wow-letra:#fff;
  position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);align-items:stretch;
  min-height:420px;margin:0 0 24px;border-radius:22px;overflow:hidden;color:#fff;
  background:radial-gradient(55% 75% at 76% 52%,var(--wow-glow) 0%,transparent 72%),radial-gradient(40% 60% at 8% 100%,rgba(255,255,255,.06),transparent 70%),linear-gradient(135deg,var(--negro) 0%,var(--negro-2) 100%);
  box-shadow:0 18px 50px -24px rgba(0,0,0,.55);animation:wowHeroIn .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes wowHeroIn{from{opacity:0;transform:translateY(14px) scale(.99)}to{opacity:1;transform:none}}
.wow-part{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
.wow-hero__tx{position:relative;z-index:1;padding:40px 12px 36px 40px;min-width:0;display:flex;flex-direction:column;justify-content:center}
.wow-logo{width:var(--wow-logo-w,190px);max-width:60%;margin:0 0 16px;min-height:1px}
.wow-logo svg{display:block;width:100%;height:auto;overflow:visible}
.wow-kicker{font:700 11.5px/1.35 Inter,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--wow-a);animation:wowSube .6s ease both .1s}
.wow-kin{font-family:var(--disp);font-weight:800;font-size:clamp(50px,6.4vw,108px);line-height:.88;margin:12px 0 16px;text-transform:uppercase;letter-spacing:.5px;color:var(--wow-letra);perspective:700px}
.wow-pal{display:inline-block;white-space:nowrap}
.wow-kin .l{display:inline-block;transform-origin:50% 100%;will-change:transform;
  animation:wkIn .85s cubic-bezier(.2,.9,.2,1) calc(var(--i) * 60ms) both}
@keyframes wkIn{from{opacity:0;transform:translateY(.55em) rotateX(-85deg);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
.wow-sub{max-width:560px;color:rgba(255,255,255,.8);font-size:15px;line-height:1.55;margin:0 0 20px;animation:wowSube .7s ease both .45s}
.wow-sub b{color:#fff}
@keyframes wowSube{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.wow-datos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;max-width:660px}
.wow-datos>div{min-width:0;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:13px;padding:11px 12px;backdrop-filter:blur(3px);animation:wowSube .6s ease both;animation-delay:calc(.6s + var(--k,0) * 90ms)}
.wow-datos>div:nth-child(2){--k:1}.wow-datos>div:nth-child(3){--k:2}.wow-datos>div:nth-child(4){--k:3}
.wow-datos b{display:block;font-family:var(--disp);font-weight:800;font-size:28px;line-height:1;color:var(--wow-b);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wow-datos span{display:block;margin-top:5px;font-size:11.5px;line-height:1.3;color:rgba(255,255,255,.7)}
.wow-3d{position:relative;z-index:1;margin:0;min-width:0;display:flex;flex-direction:column;min-height:420px}
.wow-3d__stage{position:relative;flex:1;min-height:340px}
.wow-3d__ph{position:absolute;left:50%;top:50%;height:72%;width:auto;max-width:80%;object-fit:contain;transform:translate(-50%,-50%);filter:drop-shadow(0 24px 22px rgba(0,0,0,.45));animation:wowFlota 4s ease-in-out infinite;transition:opacity .5s ease}
.p3d-listo .wow-3d__ph{opacity:0;pointer-events:none}
@keyframes wowFlota{50%{transform:translate(-50%,-53%)}}
.p3d-lienzo{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;cursor:grab;outline:none;animation:wowAparece .8s ease both}
.p3d-lienzo.arrastra{cursor:grabbing}
.p3d-respaldo{position:absolute;left:50%;top:50%;height:72%;max-width:80%;object-fit:contain;transform:translate(-50%,-50%);animation:wowFlota 4s ease-in-out infinite}
@keyframes wowAparece{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
.wow-3d figcaption{position:relative;z-index:1;padding:0 22px 16px;text-align:right;font-size:11px;color:rgba(255,255,255,.55);line-height:1.35}
.wow-3d__hint{position:absolute;top:16px;right:18px;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:99px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);font:600 11px/1 Inter,sans-serif;color:rgba(255,255,255,.85);pointer-events:none;transition:opacity .4s ease;animation:wowPulso 2.4s ease-in-out infinite 1.5s}
.wow-tocado .wow-3d__hint{opacity:0}
@keyframes wowPulso{50%{transform:translateX(-4px)}}

/* ---------- efecto de la palabra: el slogan sube como vapor y se asienta; "COCINA" queda en naranja ---------- */
.wow-kin--vapor .l{animation:wkIn .85s cubic-bezier(.2,.9,.2,1) calc(var(--i) * 45ms) both,wkVapor 5.2s ease-in-out calc(1.6s + var(--i) * 90ms) infinite}
@keyframes wkVapor{0%,70%,100%{transform:none;text-shadow:none}78%{transform:translateY(-.06em);text-shadow:0 -.12em .3em rgba(255,255,255,.35)}86%{transform:none}}
.wow-kin--vapor .wow-pal:last-child .l{color:var(--wow-a)}
.wow-hero--frio .wow-kin--vapor .wow-pal:last-child .l{color:#7FD3F5}

/* fuera de pantalla o pestaña oculta: todo quieto */
.wow-pausa *,.wow-pausa{animation-play-state:paused!important}

/* ---------- responsive ---------- */
@media (max-width:1180px){.wow-hero__tx{padding:34px 8px 30px 30px}.wow-datos b{font-size:24px}}
@media (max-width:900px){
  .wow-hero{grid-template-columns:minmax(0,1fr);min-height:0}
  .wow-hero__tx{padding:28px 22px 4px}
  .wow-3d{min-height:330px}.wow-3d__stage{min-height:290px}
  .wow-datos{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .wow-hero{border-radius:16px;margin-bottom:18px}
  .wow-hero__tx{padding:24px 18px 2px}
  .wow-kin{font-size:clamp(40px,12.5vw,60px)}
  .wow-sub{font-size:14px}
  .wow-3d figcaption{padding:0 16px 14px;text-align:left}
}

/* ---------- movimiento reducido ---------- */
@media (prefers-reduced-motion:reduce){
  .wow-hero,.wow-kicker,.wow-sub,.wow-datos>div,.wow-kin .l,.wow-3d__ph,.p3d-lienzo,.p3d-respaldo,.wow-3d__hint{animation:none!important}
}

/* mientras está la pantalla de apertura, el hero espera (las animaciones arrancan cuando se ve) */
.wow-espera,.wow-espera *{animation-play-state:paused!important}