/* =========================================================
   WANDI · estilos compartidos por todas las páginas
   Colores de marca: #454545 · #bdfa3c · #fcfdf9
   ========================================================= */
body{margin:0;background:#fcfdf9;color:#454545;font-family:'DM Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:#454545}a:hover{color:#1f1f1f}
.dsp{font-family:'Bricolage Grotesque','DM Sans',sans-serif;letter-spacing:-0.02em}
.wrap{max-width:1200px;margin:0 auto;padding-left:24px;padding-right:24px}
.eyebrow{font-weight:700;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:#5f5f5f}
.h1{margin:0;font-size:clamp(42px,6vw,80px);line-height:.98;font-weight:800;color:#3a3a3a}
.h2{margin:0;font-size:clamp(34px,4.4vw,56px);line-height:1.04;font-weight:800}
.h3{margin:0;font-size:24px;font-weight:700}
.lead{margin:0;font-size:20px;line-height:1.55;color:#555}
.body{margin:0;font-size:16px;line-height:1.55;color:#555}
.mark{background:#bdfa3c;border-radius:16px;padding:0 .16em;display:inline-block;transform:rotate(-1.5deg)}
.pill{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;padding:7px 14px;border-radius:999px;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.card{background:#ffffff;border:2px solid #ecefe4;border-radius:28px;padding:28px;display:flex;flex-direction:column;gap:14px;position:relative}
.card-dark{background:#454545;color:#fcfdf9;border-radius:28px;padding:28px;display:flex;flex-direction:column;gap:14px;position:relative}
.card-h{transition:transform .35s cubic-bezier(.3,1.4,.5,1),box-shadow .35s}
.card-h:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:0 22px 40px -18px rgba(40,40,40,.28)}
.panel-dark{max-width:1280px;margin:0 auto;background:#454545;color:#fcfdf9;border-radius:44px;padding:clamp(36px,6vw,80px) clamp(20px,5vw,64px);position:relative}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border-radius:16px;font-weight:700;font-size:16px;text-decoration:none;border:0;cursor:pointer;font-family:inherit;transition:transform .2s cubic-bezier(.3,1.6,.5,1),box-shadow .2s}
.btn:hover{transform:translateY(-3px)}.btn:active{transform:translateY(2px)}
.btn-dark{background:#454545;color:#fcfdf9;box-shadow:0 5px 0 #1f1f1f}.btn-dark:hover{color:#bdfa3c;box-shadow:0 8px 0 #1f1f1f}
.btn-lime{background:#bdfa3c;color:#2b2b2b;box-shadow:0 5px 0 #7bbb04}.btn-lime:hover{color:#2b2b2b;box-shadow:0 8px 0 #7bbb04}
.btn-ghost{background:transparent;color:#454545;box-shadow:inset 0 0 0 2px #454545}.btn-ghost:hover{background:#454545;color:#fcfdf9}
.lnk{font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:8px;background:linear-gradient(#bdfa3c,#bdfa3c) 0 92%/100% 6px no-repeat;padding-bottom:2px}
.lnk:hover{background-size:100% 40%}

/* Navegación */
.navl{text-decoration:none;font-weight:600;font-size:15px;padding:8px 4px;background:linear-gradient(#bdfa3c,#bdfa3c) 0 88%/0 6px no-repeat;transition:background-size .3s}
.navl:hover,.navl--on{background-size:100% 6px}
.navm{display:flex;align-items:center;min-height:48px;padding:0 12px;border-radius:12px;text-decoration:none;font-weight:600;font-size:17px}
.navm:hover,.navm--on{background:#f0f6dc}
.burger{display:none;width:44px;height:44px;border-radius:14px;border:2px solid #454545;background:transparent;color:#454545;align-items:center;justify-content:center;cursor:pointer}
.show-sm{display:none !important}
@media (max-width:900px){
  .hide-sm{display:none !important}
  .show-sm{display:flex !important}
  .burger{display:flex}
  .nav-cta{margin-left:auto}
  .rag-row{flex-direction:column}
  .rag-link{transform:rotate(90deg)}
}
@media (max-width:560px){.nav-cta{display:none !important}.burger{margin-left:auto}}

/* ===== Menú: barra arriba; al bajar se despega y flota como cápsula =====
   Mismo alto en los dos estados, así la página nunca salta. */
.hdr{display:block;width:100%;margin:0 auto;background:rgba(252,253,249,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid transparent;border-bottom-color:#ecefe4;border-radius:0;box-shadow:0 0 0 0 rgba(40,40,40,0);
  font-family:'DM Sans',system-ui,sans-serif;color:#454545;transform:translateY(0);
  transition:width .55s cubic-bezier(.77,0,.175,1),border-radius .55s cubic-bezier(.77,0,.175,1),transform .55s cubic-bezier(.77,0,.175,1),box-shadow .55s cubic-bezier(.77,0,.175,1),border-color .4s,background-color .4s;
  animation:hdrIn .7s cubic-bezier(.23,1,.32,1) backwards}
.hdr--float{width:min(1140px,calc(100% - 24px));border-radius:22px;border-color:#e2e6d6;background:rgba(252,253,249,.88);transform:translateY(12px);
  box-shadow:0 18px 40px -22px rgba(40,40,40,.38),0 2px 8px -3px rgba(40,40,40,.10)}
@keyframes hdrIn{from{opacity:0;transform:translateY(-18px)}}

/* ===== Entrada al cargar la página (bloque principal) =====
   Los textos suben escalonados, el resaltado se dibuja y el Wandi principal sube después. */
.ld-hero>:first-child>*{animation:ldUp .8s cubic-bezier(.23,1,.32,1) backwards}
.ld-hero>:first-child>:nth-child(1){animation-delay:.12s}
.ld-hero>:first-child>:nth-child(2){animation-delay:.2s}
.ld-hero>:first-child>:nth-child(3){animation-delay:.32s}
.ld-hero>:first-child>:nth-child(4){animation-delay:.42s}
.ld-hero>:first-child>:nth-child(5){animation-delay:.52s}
.ld-hero>:first-child>:nth-child(6){animation-delay:.6s}
.ld-hero .mark{animation:ldMark .7s cubic-bezier(.77,0,.175,1) .55s backwards}
.ld-hero>:nth-child(2){animation:ldRise 1s cubic-bezier(.23,1,.32,1) .3s backwards}
@keyframes ldUp{from{opacity:0;transform:translateY(22px)}}
@keyframes ldRise{from{opacity:0;transform:translateY(40px) scale(.96)}}
@keyframes ldMark{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* Mascota: contenedor interactivo (crece al pasar el mouse) */
.mz{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.mz:hover{transform:scale(1.08) rotate(-3deg)}

/* ===== Movimiento general ===== */
.mq{display:flex;width:max-content;animation:mq 30s linear infinite}
@keyframes mq{to{transform:translateX(-50%)}}
.fl1{animation:fl 5s ease-in-out infinite}.fl2{animation:fl 6s ease-in-out -2s infinite}.fl3{animation:fl 5.6s ease-in-out -4s infinite}
@keyframes fl{0%,100%{translate:0 0}50%{translate:0 -12px}}
.spin{animation:spin 26s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes spin{to{transform:rotate(360deg)}}
.drawloop{stroke-dasharray:40;stroke-dashoffset:40;animation:drawloop 4s ease infinite}
@keyframes drawloop{0%,10%{stroke-dashoffset:40}35%,85%{stroke-dashoffset:0}100%{stroke-dashoffset:40}}
.draw{stroke-dasharray:40;stroke-dashoffset:40;animation:draw .7s .25s ease forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.flow{stroke-dasharray:6 8;animation:flow 1s linear infinite}
@keyframes flow{to{stroke-dashoffset:-14}}
.live{width:8px;height:8px;border-radius:50%;background:#7bbb04;box-shadow:0 0 0 0 rgba(123,187,4,.6);animation:live 1.8s infinite}
@keyframes live{70%{box-shadow:0 0 0 8px rgba(123,187,4,0)}100%{box-shadow:0 0 0 0 rgba(123,187,4,0)}}
.msg{animation:msgIn .5s cubic-bezier(.2,.9,.3,1.25) both}
@keyframes msgIn{from{opacity:0;transform:translateY(16px) scale(.94)}}
@supports (animation-timeline: view()){
  .rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  @keyframes rv{from{opacity:0;transform:translateY(40px) scale(.97)}}
}

/* ===== Chat ===== */
.dots{display:inline-flex;gap:5px}
.dots span{width:7px;height:7px;border-radius:50%;background:#8a8a8a;animation:dot 1.1s infinite}
.dots span:nth-child(2){animation-delay:.15s}.dots span:nth-child(3){animation-delay:.3s}
@keyframes dot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-5px);opacity:1}}
.caret{display:inline-block;width:2px;height:18px;background:#454545;margin-left:1px;vertical-align:-3px;animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.send{width:44px;height:44px;border-radius:14px;border:0;display:flex;align-items:center;justify-content:center;background:#e9ece2;color:#6b6b6b;transition:background .2s,transform .2s;flex:none}
.send--on{background:#bdfa3c;color:#2b2b2b;transform:scale(1.08)}
.bub-u{align-self:flex-end;max-width:80%;background:#454545;color:#fcfdf9;padding:10px 14px;border-radius:18px 18px 4px 18px;font-size:14.5px;line-height:1.45}
.bub-b{align-self:flex-start;background:#ffffff;border:1.5px solid #e6e9de;padding:10px 14px;border-radius:18px 18px 18px 4px;font-size:14.5px;line-height:1.45}
.tab{min-height:44px;padding:0 18px;border-radius:999px;border:2px solid #6a6a6a;background:transparent;color:#fcfdf9;font:600 15px 'DM Sans',sans-serif;cursor:pointer;transition:all .2s}
.tab:hover{border-color:#bdfa3c}
.tab--on{background:#bdfa3c;border-color:#bdfa3c;color:#2b2b2b}
.tab-l{min-height:44px;padding:0 18px;border-radius:999px;border:2px solid #d4d8ca;background:#ffffff;color:#454545;font:600 15px 'DM Sans',sans-serif;cursor:pointer;transition:all .2s}
.tab-l:hover{border-color:#454545}
.tab-l--on{background:#454545;border-color:#454545;color:#fcfdf9}
.step{display:flex;gap:16px;align-items:flex-start;padding:14px 16px;border-radius:18px;border:2px solid transparent;color:#b9bbb2;transition:all .35s}
.step .stepnum{flex:none;width:34px;height:34px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;background:#575757;color:#d9dbd2;transition:all .35s}
.step--done{color:#e4e6dd}
.step--done .stepnum{background:#6c8f22;color:#fcfdf9}
.step--on{color:#fcfdf9;border-color:#bdfa3c;background:#4f4f4f;transform:translateX(6px)}
.step--on .stepnum{background:#bdfa3c;color:#2b2b2b}
.prow{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}

/* ===== Íconos animados de funciones ===== */
.ic-b1{animation:pop 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:0% 100%}
.ic-b2{animation:pop 3.2s ease-in-out 1.6s infinite;transform-box:fill-box;transform-origin:100% 100%}
@keyframes pop{0%,100%{transform:scale(1)}12%{transform:scale(1.12)}24%{transform:scale(1)}}
.ic-mag{animation:scan 4.4s ease-in-out infinite}
@keyframes scan{0%,100%{transform:translate(0,0)}30%{transform:translate(34px,0)}60%{transform:translate(34px,22px)}80%{transform:translate(0,22px)}}
.ic-hit{animation:hit 4.4s ease-in-out infinite}
@keyframes hit{0%,55%{fill:#e8ebe0}62%,100%{fill:#bdfa3c}}
.ic-f1,.ic-f3{transform-box:fill-box;transform-origin:50% 100%}
.ic-f1{animation:fanL 3.6s ease-in-out infinite}.ic-f3{animation:fanR 3.6s ease-in-out infinite}
@keyframes fanL{0%,100%{transform:rotate(0)}40%,70%{transform:rotate(-14deg) translateX(-6px)}}
@keyframes fanR{0%,100%{transform:rotate(0)}40%,70%{transform:rotate(14deg) translateX(6px)}}
.ic-rec{animation:print 3.4s ease-in-out infinite}
@keyframes print{0%{transform:translateY(-34px)}55%,85%{transform:translateY(0)}100%{transform:translateY(-34px)}}
.ic-orbit{animation:spin 9s linear infinite;transform-origin:60px 48px}
.ic-dot{animation:travel 2.2s linear infinite}
.ic-dot2{animation-delay:.73s}.ic-dot3{animation-delay:1.46s}
@keyframes travel{from{transform:translateX(0);opacity:0}15%{opacity:1}85%{opacity:1}to{transform:translateX(40px);opacity:0}}

/* ===== Formularios y acordeón ===== */
.inp{width:100%;min-height:50px;border-radius:14px;border:2px solid #d4d8ca;background:#ffffff;color:#454545;padding:0 16px;font:16px 'DM Sans',sans-serif}
.inp::placeholder{color:#6b6b6b}
.inp:focus{outline:none;border-color:#454545;box-shadow:0 0 0 4px #bdfa3c}
textarea.inp{min-height:110px;padding:14px 16px;resize:vertical}
.faq-ic{transition:transform .3s}.faq-ic--on{transform:rotate(45deg)}
.rng{width:100%;accent-color:#7bbb04;height:28px}

/* =========================================================
   MOVIMIENTO DE WANDI · notas del proyecto (método rossark-motion)
   - Nada se teletransporta: todo interpola con curvas suaves.
     · viajes y giros:   cubic-bezier(.77,0,.175,1)
     · respirar y mecer: cubic-bezier(.37,0,.63,1)
     · abrir o llegar:   cubic-bezier(.23,1,.32,1)
     · caer:             cubic-bezier(.55,0,1,.45)
   - Cada parte gira desde su articulación: el cuerpo desde la base
     (cuello), la antena desde su raíz y la mano desde la muñeca.
   - La antena sigue a la cabeza con ~150 ms de retraso (follow-through).
   - Parpadeo: cierra en ~110 ms, se sostiene ~40 ms y abre en ~190 ms.
   - Cada Wandi tiene su propio ritmo: Wandi.dc.html le asigna
     --wd-r (velocidad ±14 %), --wd-p (fase) y --wd-b (periodo del parpadeo).
   - Se queda quieto fuera de pantalla (.wdw--off) y con
     “reducir movimiento” (el cuadro 0 de cada pose es un buen dibujo).
   Para ajustar: cambia los segundos o los grados en el bloque de cada pose.
   ========================================================= */

/* ---------- LOGO (hero y pose="logo") ----------
   Partes: .w-head  .w-eye  .w-hand  .w-ant  .w-ring */
.logo{overflow:visible;display:block}
.logo .w-head{transform-box:fill-box;transform-origin:50% 100%}
.logo .w-eyes{transition:transform .5s cubic-bezier(.77,0,.175,1)}
.logo .w-eye{transform-box:fill-box;transform-origin:50% 55%}
.logo .w-hand{transform-box:fill-box;transform-origin:30% 18%}
.logo .w-ant{transform-box:fill-box;transform-origin:8% 96%}
.logo .w-ring{transform-box:fill-box;transform-origin:center;opacity:0}
.logo--vivo{animation:wFloat calc(4.8s * var(--wd-r,1)) cubic-bezier(.37,0,.63,1) calc(var(--wd-p,0s) * -1) infinite}
.logo--vivo .w-head{animation:wHeadIdle calc(6.4s * var(--wd-r,1)) cubic-bezier(.37,0,.63,1) calc(var(--wd-p,0s) * -1) infinite}
.logo--vivo .w-ant{animation:wAntLag calc(6.4s * var(--wd-r,1)) cubic-bezier(.37,0,.63,1) calc(var(--wd-p,0s) * -1 + .16s) infinite}
.logo--vivo .w-eye{animation:wdBlinkD calc(var(--wd-b,4.4s) * 2) linear calc(var(--wd-p,0s) * -1.3) infinite}
.logo--vivo .w-hand{animation:wWaveSome calc(8s * var(--wd-r,1)) linear calc(var(--wd-p,0s) * -1) infinite}
.logo--vivo .w-ring{animation:wRing 3.2s cubic-bezier(.23,1,.32,1) infinite}
.logo--vivo .w-ring2{animation-delay:1.6s}
.logo--saludo .w-hand{animation:wWave 1.8s cubic-bezier(.37,0,.63,1) infinite}
.logo--saludo .w-eye{animation:wdBlink var(--wd-b,3.8s) linear infinite}
.logo--saludo .w-head{animation:wHeadIdle 3.6s cubic-bezier(.37,0,.63,1) infinite}
.logo--saludo .w-ant{animation:wAntLag 3.6s cubic-bezier(.37,0,.63,1) .16s infinite}
.logo--parpadeo .w-eye{animation:wdBlink var(--wd-b,3.6s) linear infinite}
/* alegría al pasar el mouse por "Quiero mi Wandi" (hero):
   los cachetes suben y dejan los ojos sonrientes, salta, saluda, la antena rebota y salen brillos */
.logo .w-joy{transform-box:fill-box;transform-origin:50% 100%}
.logo .w-handjoy{transform-box:fill-box;transform-origin:30% 18%}
.logo .w-antjoy{transform-box:fill-box;transform-origin:8% 96%}
.logo .w-cheek{transform:translateY(0);transition:transform .45s cubic-bezier(.77,0,.175,1)}
.logo--alegre .w-cheek{transform:translateY(-108px);transition:transform .38s cubic-bezier(.23,1,.32,1)}
.logo .w-sparks{opacity:0;transition:opacity .2s cubic-bezier(.55,0,1,.45)}
.logo--alegre .w-sparks{opacity:1;transition:opacity .25s cubic-bezier(.23,1,.32,1)}
.logo .w-sp{transform-box:fill-box;transform-origin:center;animation:wSpark 1.2s cubic-bezier(.37,0,.63,1) infinite;animation-play-state:paused}
.logo--alegre .w-sp{animation-play-state:running}
.logo .w-sp2{animation-delay:-.3s}.logo .w-sp3{animation-delay:-.6s}.logo .w-sp4{animation-delay:-.9s}
@keyframes wSpark{0%,100%{transform:scale(.55) rotate(0deg)}50%{transform:scale(1.1) rotate(25deg)}}
@keyframes wFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
@keyframes wHeadIdle{0%,100%{transform:rotate(0)}30%{transform:rotate(1.6deg)}70%{transform:rotate(-1.4deg)}}
@keyframes wAntLag{0%,100%{transform:rotate(0)}30%{transform:rotate(-5deg)}70%{transform:rotate(4.5deg)}}
@keyframes wWave{0%,100%{transform:rotate(0)}30%{transform:rotate(-14deg)}65%{transform:rotate(6deg)}}
/* la mano saluda de vez en cuando: sube, dos vaivenes y baja sin detenerse */
@keyframes wWaveSome{
  0%,64%{transform:rotate(0);animation-timing-function:cubic-bezier(.77,0,.175,1)}
  70%{transform:rotate(-15deg);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  75%{transform:rotate(-5deg);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  80%{transform:rotate(-14deg);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  85%{transform:rotate(-6deg);animation-timing-function:cubic-bezier(.77,0,.175,1)}
  93%,100%{transform:rotate(0)}}
@keyframes wRing{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.8);opacity:0}}

/* ---------- MASCOTA WANDI ----------
   Capas de cada pose (Wandi.dc.html):
   svg.wd    cabeza y cuerpo: gira desde la base (cuello)
   .wd-all   respiración: sube y se estira manteniendo el volumen
   .wd-eye   ojos: parpadeo asimétrico       .wd-eyes  mirada
   .wd-ant   antena: sigue a la cabeza con retraso, gira desde su raíz
   .wd-fx / .wd-fx2  efectos que aparecen y desaparecen
   .wd-heart .wd-wink .wd-tear .wd-z1..z3 .wd-f1..f4 */
.wdw{--wd-r:1;--wd-p:0s;--wd-b:4s}
.wd{display:block;width:100%;height:100%;overflow:visible;transform-origin:50% 100%}
.wd g{transform-box:fill-box}
.wd-all{transform-origin:50% 100%}
.wd-eye{transform-origin:50% 55%}
.wd-ant{transform-origin:15% 100%}
.wd-fx,.wd-fx2,.wd-heart,.wd-wink{transform-origin:50% 50%}

/* normal: respira, ladea apenas la cabeza, la antena la sigue */
.wd--normal{animation:wdTiltIdle calc(5.6s * var(--wd-r)) cubic-bezier(.37,0,.63,1) calc(var(--wd-p) * -1) infinite}
.wd--normal .wd-all{animation:wdBreathe calc(3.4s * var(--wd-r)) cubic-bezier(.37,0,.63,1) calc(var(--wd-p) * -1) infinite}
.wd--normal .wd-ant{animation:wdAntLag calc(5.6s * var(--wd-r)) cubic-bezier(.37,0,.63,1) calc(var(--wd-p) * -1 + .15s) infinite}
.wd--normal .wd-eye{animation:wdBlinkD calc(var(--wd-b) * 2) linear calc(var(--wd-p) * -1.3) infinite}

/* saludando: se mece desde la base y la antena va detrás */
.wd--saludando{animation:wdRock calc(2.4s * var(--wd-r)) cubic-bezier(.37,0,.63,1) calc(var(--wd-p) * -1) infinite}
.wd--saludando .wd-all{animation:wdBreathe calc(3.2s * var(--wd-r)) cubic-bezier(.37,0,.63,1) calc(var(--wd-p) * -1) infinite}
.wd--saludando .wd-ant{animation:wdAntRock calc(2.4s * var(--wd-r)) cubic-bezier(.37,0,.63,1) calc(var(--wd-p) * -1 + .15s) infinite}
.wd--saludando .wd-fx{animation:wdFxWave calc(2.4s * var(--wd-r)) cubic-bezier(.37,0,.63,1) calc(var(--wd-p) * -1) infinite}
.wd--saludando .wd-eye{animation:wdBlink var(--wd-b) linear calc(var(--wd-p) * -1.3) infinite}

/* guiño: inclina la cabeza, aprieta el ojo al llegar y sueltan brillos */
.wd--guino{animation:wdTiltHold calc(4.8s * var(--wd-r)) linear calc(var(--wd-p) * -1) infinite}
.wd--guino .wd-all{animation:wdBreathe calc(3.6s * var(--wd-r)) cubic-bezier(.37,0,.63,1) calc(var(--wd-p) * -1) infinite}
.wd--guino .wd-ant{animation:wdAntHold calc(4.8s * var(--wd-r)) linear calc(var(--wd-p) * -1 + .15s) infinite}
.wd--guino .wd-wink{animation:wdWink calc(4.8s * var(--wd-r)) linear calc(var(--wd-p) * -1) infinite}
.wd--guino .wd-fx{animation:wdFxBeat calc(4.8s * var(--wd-r)) linear calc(var(--wd-p) * -1) infinite}

/* feliz: se agacha, salta, aterriza aplastándose y se acomoda */
.wd--feliz{animation:wdTiltIdle calc(5s * var(--wd-r)) cubic-bezier(.37,0,.63,1) calc(var(--wd-p) * -1) infinite}
.wd--feliz .wd-all{animation:wdHop calc(2.6s * var(--wd-r)) linear calc(var(--wd-p) * -1) infinite}
.wd--feliz .wd-fx{animation:wdFxHop calc(2.6s * var(--wd-r)) linear calc(var(--wd-p) * -1) infinite}

/* emocionado: pulso de emoción que se pasa de un lado al otro */
.wd--emocionado{animation:wdRock2 calc(1.9s * var(--wd-r)) cubic-bezier(.37,0,.63,1) calc(var(--wd-p) * -1) infinite}
.wd--emocionado .wd-all{animation:wdJiggle calc(.64s * var(--wd-r)) cubic-bezier(.37,0,.63,1) calc(var(--wd-p) * -1) infinite}
.wd--emocionado .wd-ant{animation:wdAntRock calc(1.9s * var(--wd-r)) cubic-bezier(.37,0,.63,1) calc(var(--wd-p) * -1 + .14s) infinite}
.wd--emocionado .wd-fx{animation:wdFxPulse calc(1.28s * var(--wd-r)) cubic-bezier(.37,0,.63,1) calc(var(--wd-p) * -1) infinite}
.wd--emocionado .wd-fx2{animation:wdFxPulse calc(1.28s * var(--wd-r)) cubic-bezier(.37,0,.63,1) calc(var(--wd-p) * -1 + .64s) infinite}
.wd--emocionado .wd-eye{animation:wdBlink var(--wd-b) linear calc(var(--wd-p) * -1.3) infinite}

/* corazón: el corazón late (lub-dub) y uno pequeño sube y se va */
.wd--corazon{animation:wdTiltIdle calc(6s * var(--wd-r)) cubic-bezier(.37,0,.63,1) calc(var(--wd-p) * -1) infinite}
.wd--corazon .wd-all{animation:wdBreathe calc(3.6s * var(--wd-r)) cubic-bezier(.37,0,.63,1) calc(var(--wd-p) * -1) infinite}
.wd--corazon .wd-heart{animation:wdBeat calc(1.4s * var(--wd-r)) linear calc(var(--wd-p) * -1) infinite}
.wd--corazon .wd-fx{animation:wdRise calc(3.2s * var(--wd-r)) linear calc(var(--wd-p) * -1) infinite}
.wd--corazon .wd-ant{animation:wdAntLag calc(6s * var(--wd-r)) cubic-bezier(.37,0,.63,1) calc(var(--wd-p) * -1 + .15s) infinite}
.wd--corazon .wd-eye{animation:wdBlinkD calc(var(--wd-b) * 2) linear calc(var(--wd-p) * -1.3) infinite}

/* curioso: gira la cabeza hacia un lado, se queda mirando, luego al otro; parpadea al girar */
.wd--curioso{animation:wdCurious calc(5.6s * var(--wd-r)) linear calc(var(--wd-p) * -1) infinite}
.wd--curioso .wd-all{animation:wdBreathe calc(3.4s * var(--wd-r)) cubic-bezier(.37,0,.63,1) calc(var(--wd-p) * -1) infinite}
.wd--curioso .wd-ant{animation:wdAntCurious calc(5.6s * var(--wd-r)) linear calc(var(--wd-p) * -1 + .16s) infinite}
.wd--curioso .wd-eye{animation:wdBlinkTurn calc(5.6s * var(--wd-r)) linear calc(var(--wd-p) * -1) infinite}
.wd--curioso .wd-fx{animation:wdFxBeat calc(5.6s * var(--wd-r)) linear calc(var(--wd-p) * -1 + .3s) infinite}

/* pensativo: mira arriba a un lado, sostiene, mira al otro; las burbujas suben */
.wd--pensativo{animation:wdTiltIdle calc(6s * var(--wd-r)) cubic-bezier(.37,0,.63,1) calc(var(--wd-p) * -1) infinite}
.wd--pensativo .wd-all{animation:wdBreathe calc(4s * var(--wd-r)) cubic-bezier(.37,0,.63,1) calc(var(--wd-p) * -1) infinite}
.wd--pensativo .wd-eyes{animation:wdLook calc(6s * var(--wd-r)) linear calc(var(--wd-p) * -1) infinite}
.wd--pensativo .wd-fx2{animation:wdBubble calc(3s * var(--wd-r)) linear calc(var(--wd-p) * -1) infinite}
.wd--pensativo .wd-fx{animation:wdBubble calc(3s * var(--wd-r)) linear calc(var(--wd-p) * -1 + .45s) infinite}

/* sorprendido: brinca del susto, aterriza y se queda con los ojos abiertos */
.wd--sorprendido .wd-all{animation:wdShock calc(3.6s * var(--wd-r)) linear calc(var(--wd-p) * -1) infinite}
.wd--sorprendido .wd-ant{animation:wdAntShock calc(3.6s * var(--wd-r)) linear calc(var(--wd-p) * -1 + .12s) infinite}
.wd--sorprendido .wd-fx{animation:wdPop calc(3.6s * var(--wd-r)) linear calc(var(--wd-p) * -1) infinite}
.wd--sorprendido .wd-fx2{animation:wdPop calc(3.6s * var(--wd-r)) linear calc(var(--wd-p) * -1 + .08s) infinite}
.wd--sorprendido .wd-eye{animation:wdBlinkLate calc(3.6s * var(--wd-r)) linear calc(var(--wd-p) * -1) infinite}

/* dormido: respiración lenta y profunda; las zzz suben de una en una */
.wd--dormido{animation:wdTiltIdle calc(7.2s * var(--wd-r)) cubic-bezier(.37,0,.63,1) calc(var(--wd-p) * -1) infinite}
.wd--dormido .wd-all{animation:wdSleep calc(4.4s * var(--wd-r)) cubic-bezier(.37,0,.63,1) calc(var(--wd-p) * -1) infinite}
.wd--dormido .wd-z1{animation:wdZ calc(3.9s * var(--wd-r)) linear calc(var(--wd-p) * -1) infinite}
.wd--dormido .wd-z2{animation:wdZ calc(3.9s * var(--wd-r)) linear calc(var(--wd-p) * -1 + 1.3s) infinite}
.wd--dormido .wd-z3{animation:wdZ calc(3.9s * var(--wd-r)) linear calc(var(--wd-p) * -1 + 2.6s) infinite}

/* escondido: se asoma desde la esquina de la pared, mira, parpadea y vuelve */
.wd--escondido{transform-origin:100% 100%;animation:wdPeek calc(5s * var(--wd-r)) linear calc(var(--wd-p) * -1) infinite}
.wd--escondido .wd-all{animation:wdBreathe calc(3.4s * var(--wd-r)) cubic-bezier(.37,0,.63,1) calc(var(--wd-p) * -1) infinite}
.wd--escondido .wd-ant{animation:wdAntPeek calc(5s * var(--wd-r)) linear calc(var(--wd-p) * -1 + .15s) infinite}
.wd--escondido .wd-eye{animation:wdBlinkPeek calc(5s * var(--wd-r)) linear calc(var(--wd-p) * -1) infinite}
.wd--escondido .wd-fx{animation:wdFxPeek calc(5s * var(--wd-r)) linear calc(var(--wd-p) * -1) infinite}

/* triste: se balancea lento, cabizbajo; las lágrimas se forman y caen */
.wd--triste{animation:wdSway calc(5.6s * var(--wd-r)) cubic-bezier(.37,0,.63,1) calc(var(--wd-p) * -1) infinite}
.wd--triste .wd-all{animation:wdSigh calc(4.6s * var(--wd-r)) cubic-bezier(.37,0,.63,1) calc(var(--wd-p) * -1) infinite}
.wd--triste .wd-tear{animation:wdTear calc(2.6s * var(--wd-r)) linear calc(var(--wd-p) * -1) infinite}
.wd--triste .wd-tear2{animation-delay:calc(var(--wd-p) * -1 + 1.3s)}

/* vuelta: frente, lado, espalda (se conserva para quien la use) */
.wd--vuelta .wd-all{animation:wdBreathe calc(3s * var(--wd-r)) cubic-bezier(.37,0,.63,1) calc(var(--wd-p) * -1) infinite}
.wd--vuelta .wd-f{opacity:0;animation:wdFrame 2.8s steps(1,end) infinite}
.wd--vuelta .wd-f2{animation-delay:.7s}
.wd--vuelta .wd-f3{animation-delay:1.4s}
.wd--vuelta .wd-f4{animation-delay:2.1s}
.wd--vuelta .wd-eye{animation:wdBlink var(--wd-b) linear infinite}

/* alegría (wdw--joy): los ojos se achinan desde abajo, como si subieran los cachetes,
   y aparecen brillos; el salto lo hace Wandi.dc.html */
.wd-eye>path,.wd-eyes>path{transform-box:fill-box;transform-origin:50% 8%;transition:transform .4s cubic-bezier(.77,0,.175,1)}
.wdw--joy .wd-eye>path,.wdw--joy .wd-eyes>path{transform:scaleY(.52);transition:transform .32s cubic-bezier(.23,1,.32,1)}
.wdw{transform-origin:50% 100%}
.wd-joysparks{opacity:0;transition:opacity .2s cubic-bezier(.55,0,1,.45)}
.wdw--joy .wd-joysparks{opacity:1;transition:opacity .25s cubic-bezier(.23,1,.32,1)}
.wd-js{transform-box:fill-box;transform-origin:center;animation:wSpark 1.2s cubic-bezier(.37,0,.63,1) infinite;animation-play-state:paused}
.wdw--joy .wd-js{animation-play-state:running}
.wd-js2{animation-delay:-.3s}.wd-js3{animation-delay:-.6s}.wd-js4{animation-delay:-.9s}

/* Quieto: prop animate = false, fuera de pantalla, o “reducir movimiento” */
.wdw--still *,.wdw--still{animation:none !important}
.wdw--still .wd--vuelta .wd-f1{opacity:1}
.wdw--off *,.logo-off,.logo-off *{animation-play-state:paused !important}

/* ---------- keyframes ---------- */
/* parpadeo: cierra ~110 ms, sostiene ~40 ms, abre ~190 ms (periodo base 4 s) */
@keyframes wdBlink{
  0%,86%{transform:scaleY(1);animation-timing-function:cubic-bezier(.77,0,.175,1)}
  88.75%{transform:scaleY(.08)}
  89.75%{transform:scaleY(.08);animation-timing-function:cubic-bezier(.23,1,.32,1)}
  94.5%,100%{transform:scaleY(1)}}
/* parpadeo con doble parpadeo de vez en cuando (periodo base 8 s) */
@keyframes wdBlinkD{
  0%,42%{transform:scaleY(1);animation-timing-function:cubic-bezier(.77,0,.175,1)}
  43.4%{transform:scaleY(.08)}
  43.9%{transform:scaleY(.08);animation-timing-function:cubic-bezier(.23,1,.32,1)}
  46.3%,86%{transform:scaleY(1);animation-timing-function:cubic-bezier(.77,0,.175,1)}
  87.4%{transform:scaleY(.08)}
  87.9%{transform:scaleY(.08);animation-timing-function:cubic-bezier(.23,1,.32,1)}
  90.3%{transform:scaleY(1);animation-timing-function:cubic-bezier(.77,0,.175,1)}
  91.7%{transform:scaleY(.08)}
  92.2%{transform:scaleY(.08);animation-timing-function:cubic-bezier(.23,1,.32,1)}
  94.6%,100%{transform:scaleY(1)}}
/* parpadea justo cuando gira la cabeza (curioso, 5.6 s) */
@keyframes wdBlinkTurn{
  0%,4%{transform:scaleY(1);animation-timing-function:cubic-bezier(.77,0,.175,1)}
  6%{transform:scaleY(.08)}
  6.7%{transform:scaleY(.08);animation-timing-function:cubic-bezier(.23,1,.32,1)}
  10.1%,52%{transform:scaleY(1);animation-timing-function:cubic-bezier(.77,0,.175,1)}
  54%{transform:scaleY(.08)}
  54.7%{transform:scaleY(.08);animation-timing-function:cubic-bezier(.23,1,.32,1)}
  58.1%,100%{transform:scaleY(1)}}
/* sorprendido: no parpadea hasta que pasa el susto */
@keyframes wdBlinkLate{
  0%,78%{transform:scaleY(1);animation-timing-function:cubic-bezier(.77,0,.175,1)}
  81%{transform:scaleY(.08)}
  82%{transform:scaleY(.08);animation-timing-function:cubic-bezier(.23,1,.32,1)}
  87.3%,100%{transform:scaleY(1)}}
/* escondido: parpadea al asomarse */
@keyframes wdBlinkPeek{
  0%,24%{transform:scaleY(1);animation-timing-function:cubic-bezier(.77,0,.175,1)}
  26.2%{transform:scaleY(.08)}
  27%{transform:scaleY(.08);animation-timing-function:cubic-bezier(.23,1,.32,1)}
  30.8%,100%{transform:scaleY(1)}}

/* respiración: sube 1–1.5 unidades y conserva el volumen (ancho = 1/alto^0.6) */
@keyframes wdBreathe{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(-1.2px) scale(.991,1.015)}}
@keyframes wdSleep{0%,100%{transform:scale(1,1)}50%{transform:scale(1.022,.964)}}
@keyframes wdSigh{0%,100%{transform:translateY(0) scale(1,1)}50%{transform:translateY(.8px) scale(1.008,.986)}}

/* cabeza desde el cuello */
@keyframes wdTiltIdle{0%,100%{transform:rotate(0)}30%{transform:rotate(1.8deg)}70%{transform:rotate(-1.5deg)}}
@keyframes wdRock{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes wdRock2{0%,100%{transform:rotate(-1.8deg)}50%{transform:rotate(1.8deg)}}
@keyframes wdSway{0%,100%{transform:rotate(-1.5deg)}50%{transform:rotate(1.5deg)}}
@keyframes wdTiltHold{
  0%,8%{transform:rotate(0);animation-timing-function:cubic-bezier(.77,0,.175,1)}
  22%{transform:rotate(-4.5deg);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  60%{transform:rotate(-3.6deg);animation-timing-function:cubic-bezier(.77,0,.175,1)}
  78%,100%{transform:rotate(0)}}
@keyframes wdCurious{
  0%{transform:rotate(0);animation-timing-function:cubic-bezier(.77,0,.175,1)}
  14%{transform:rotate(-7deg);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  44%{transform:rotate(-6deg);animation-timing-function:cubic-bezier(.77,0,.175,1)}
  62%{transform:rotate(3.5deg);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  86%{transform:rotate(3deg);animation-timing-function:cubic-bezier(.77,0,.175,1)}
  100%{transform:rotate(0)}}
@keyframes wdPeek{
  0%{transform:translateX(0) rotate(0);animation-timing-function:cubic-bezier(.77,0,.175,1)}
  20%{transform:translateX(-3px) rotate(-9deg);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  52%{transform:translateX(-2.5px) rotate(-7.5deg);animation-timing-function:cubic-bezier(.77,0,.175,1)}
  70%,100%{transform:translateX(0) rotate(0)}}

/* antena: la misma onda que la cabeza, en contra y con retraso */
@keyframes wdAntLag{0%,100%{transform:rotate(0)}30%{transform:rotate(-5deg)}70%{transform:rotate(4deg)}}
@keyframes wdAntRock{0%,100%{transform:rotate(6deg)}50%{transform:rotate(-6deg)}}
@keyframes wdAntHold{
  0%,8%{transform:rotate(0);animation-timing-function:cubic-bezier(.77,0,.175,1)}
  22%{transform:rotate(8deg);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  32%{transform:rotate(3deg);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  60%{transform:rotate(2deg);animation-timing-function:cubic-bezier(.77,0,.175,1)}
  78%{transform:rotate(-5deg);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  88%,100%{transform:rotate(0)}}
@keyframes wdAntCurious{
  0%{transform:rotate(0);animation-timing-function:cubic-bezier(.77,0,.175,1)}
  14%{transform:rotate(9deg);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  24%{transform:rotate(3deg);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  44%{transform:rotate(2deg);animation-timing-function:cubic-bezier(.77,0,.175,1)}
  62%{transform:rotate(-7deg);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  72%{transform:rotate(-2deg);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  86%{transform:rotate(-1deg);animation-timing-function:cubic-bezier(.77,0,.175,1)}
  100%{transform:rotate(0)}}
@keyframes wdAntShock{
  0%,6%{transform:rotate(0);animation-timing-function:cubic-bezier(.23,1,.32,1)}
  14%{transform:rotate(-10deg);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  24%{transform:rotate(7deg);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  34%{transform:rotate(-3deg);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  44%,100%{transform:rotate(0)}}
@keyframes wdAntPeek{
  0%{transform:rotate(0);animation-timing-function:cubic-bezier(.77,0,.175,1)}
  20%{transform:rotate(10deg);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  30%{transform:rotate(3deg);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  52%{transform:rotate(2deg);animation-timing-function:cubic-bezier(.77,0,.175,1)}
  70%{transform:rotate(-6deg);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  80%,100%{transform:rotate(0)}}

/* salto con anticipación, aterrizaje y volumen conservado */
@keyframes wdHop{
  0%,30%{transform:translateY(0) scale(1,1);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  40%{transform:translateY(0) scale(1.045,.93);animation-timing-function:cubic-bezier(.23,1,.32,1)}
  50%{transform:translateY(-7px) scale(.97,1.06);animation-timing-function:cubic-bezier(.23,1,.32,1)}
  58%{transform:translateY(-10px) scale(1,1);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  67%{transform:translateY(0) scale(1.07,.88);animation-timing-function:cubic-bezier(.23,1,.32,1)}
  75%{transform:translateY(0) scale(.985,1.02);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  84%,100%{transform:translateY(0) scale(1,1)}}
@keyframes wdShock{
  0%,4%{transform:translateY(0) scale(1,1);animation-timing-function:cubic-bezier(.23,1,.32,1)}
  9%{transform:translateY(0) scale(1.05,.92);animation-timing-function:cubic-bezier(.23,1,.32,1)}
  16%{transform:translateY(-7px) scale(.96,1.06);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  24%{transform:translateY(0) scale(1.05,.93);animation-timing-function:cubic-bezier(.23,1,.32,1)}
  31%{transform:translateY(0) scale(.99,1.01);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  40%{transform:translateY(0) scale(1,1);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  70%{transform:translateY(-1px) scale(.995,1.008);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  100%{transform:translateY(0) scale(1,1)}}
/* pulso de emoción: ensancha y se pasa de lado (1.5–2.5 %) */
@keyframes wdJiggle{0%,50%,100%{transform:translateX(0) scale(1,1)}25%{transform:translateX(.6px) scale(1.022,.978)}75%{transform:translateX(-.6px) scale(1.022,.978)}}
/* latido lub-dub */
@keyframes wdBeat{
  0%{transform:scale(1);animation-timing-function:cubic-bezier(.23,1,.32,1)}
  12%{transform:scale(1.14);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  24%{transform:scale(1);animation-timing-function:cubic-bezier(.23,1,.32,1)}
  34%{transform:scale(1.08);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  48%,100%{transform:scale(1)}}
@keyframes wdWink{
  0%,20%{transform:scale(1,1);animation-timing-function:cubic-bezier(.77,0,.175,1)}
  25%{transform:scale(1.18,.62);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  50%{transform:scale(1.12,.7);animation-timing-function:cubic-bezier(.23,1,.32,1)}
  60%,100%{transform:scale(1,1)}}

/* mirada: llega en ~500 ms y sostiene más de 1 s */
@keyframes wdLook{
  0%,6%{transform:translate(0,0);animation-timing-function:cubic-bezier(.77,0,.175,1)}
  15%{transform:translate(3px,-3px);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  42%{transform:translate(3.4px,-2.6px);animation-timing-function:cubic-bezier(.77,0,.175,1)}
  52%{transform:translate(-3px,-2px);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  80%{transform:translate(-2.6px,-2.4px);animation-timing-function:cubic-bezier(.77,0,.175,1)}
  92%,100%{transform:translate(0,0)}}

/* efectos: solo aparecen y desaparecen (opacidad) mientras se mueven */
@keyframes wdFxWave{0%,100%{opacity:.25;transform:rotate(-4deg) scale(.88)}50%{opacity:1;transform:rotate(4deg) scale(1)}}
@keyframes wdFxBeat{
  0%,18%{opacity:0;transform:scale(.7);animation-timing-function:cubic-bezier(.23,1,.32,1)}
  28%{opacity:1;transform:scale(1);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  52%{opacity:1;transform:scale(.96);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  64%,100%{opacity:0;transform:scale(.8)}}
@keyframes wdFxHop{
  0%,46%{opacity:0;transform:scale(.7);animation-timing-function:cubic-bezier(.23,1,.32,1)}
  56%{opacity:1;transform:scale(1);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  72%{opacity:1;transform:scale(.96);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  84%,100%{opacity:0;transform:scale(.85)}}
@keyframes wdFxPulse{0%,100%{opacity:.35;transform:scale(.86)}50%{opacity:1;transform:scale(1)}}
@keyframes wdFxPeek{
  0%,16%{opacity:0;transform:scale(.7);animation-timing-function:cubic-bezier(.23,1,.32,1)}
  26%{opacity:1;transform:scale(1);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  50%{opacity:1;transform:scale(.95);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  60%,100%{opacity:0;transform:scale(.8)}}
@keyframes wdPop{
  0%,10%{opacity:0;transform:scale(.6);animation-timing-function:cubic-bezier(.23,1,.32,1)}
  20%{opacity:1;transform:scale(1.08);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  28%{opacity:1;transform:scale(1);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  66%{opacity:1;transform:scale(.97);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  76%,100%{opacity:0;transform:scale(.9)}}
@keyframes wdRise{
  0%{opacity:0;transform:translate(0,2px) scale(.7);animation-timing-function:cubic-bezier(.23,1,.32,1)}
  18%{opacity:1;transform:translate(-1px,-3px) scale(1);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  70%{opacity:1;transform:translate(-4px,-16px) scale(.92);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  100%{opacity:0;transform:translate(-6px,-24px) scale(.8)}}
@keyframes wdBubble{
  0%{opacity:0;transform:translateY(3px) scale(.75);animation-timing-function:cubic-bezier(.23,1,.32,1)}
  25%{opacity:1;transform:translateY(0) scale(1);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  70%{opacity:1;transform:translateY(-3px) scale(1.04);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  100%{opacity:0;transform:translateY(-6px) scale(1.08)}}
@keyframes wdZ{
  0%{opacity:0;transform:translate(0,6px) scale(.6);animation-timing-function:cubic-bezier(.23,1,.32,1)}
  25%{opacity:1;transform:translate(1px,0) scale(.85);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  70%{opacity:1;transform:translate(5px,-7px) scale(1);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  100%{opacity:0;transform:translate(7px,-11px) scale(1.05)}}
@keyframes wdTear{
  0%,8%{opacity:0;transform:translateY(-1px) scale(.6,.6);animation-timing-function:cubic-bezier(.23,1,.32,1)}
  30%{opacity:1;transform:translateY(0) scale(1,1);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  50%{opacity:1;transform:translateY(1px) scale(.95,1.1);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  86%{opacity:1;transform:translateY(9px) scale(.85,1.15)}
  100%{opacity:0;transform:translateY(11px) scale(.8,1.1)}}
@keyframes wdFrame{0%{opacity:1}25%,100%{opacity:0}}

/* ---------- Cómo funciona: tus documentos suben a la cabeza de Wandi ---------- */
.cf-stage{container-type:inline-size}
.cf-doc{position:absolute;left:3%;top:76%;display:flex;align-items:center;gap:6px;padding:6px 11px;border-radius:12px;background:#ffffff;border:1.5px solid #dfe3d5;box-shadow:0 8px 18px -10px rgba(40,40,40,.35);font:700 13px 'DM Sans',system-ui,sans-serif;color:#454545;white-space:nowrap;opacity:0;z-index:2;
  animation:cfDoc 6.6s linear infinite}
.cf-doc i{width:9px;height:9px;border-radius:3px;background:#bdfa3c;box-shadow:0 0 0 1.5px #7bbb04;flex:none}
.cf-doc2{animation-delay:2.2s}
.cf-doc3{animation-delay:4.4s}
.cf-spark{position:absolute;left:52%;top:19%;width:14px;height:14px;border-radius:50%;background:#bdfa3c;box-shadow:0 0 0 3px #f0f6dc;opacity:0;z-index:2;
  animation:cfSpark 2.2s linear .55s infinite}
@keyframes cfDoc{
  0%{opacity:0;transform:translate(0,4cqw) scale(.94) rotate(-3deg);animation-timing-function:cubic-bezier(.23,1,.32,1)}
  7%{opacity:1;transform:translate(0,0) scale(1) rotate(-2deg);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  16%{opacity:1;transform:translate(1cqw,-6cqw) scale(1) rotate(-1deg);animation-timing-function:cubic-bezier(.77,0,.175,1)}
  33%{opacity:1;transform:translate(22cqw,-44cqw) scale(.62) rotate(3deg);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  40%,100%{opacity:0;transform:translate(30cqw,-52cqw) scale(.3) rotate(6deg)}}
@keyframes cfSpark{
  0%,16%{opacity:0;transform:scale(.4);animation-timing-function:cubic-bezier(.23,1,.32,1)}
  24%{opacity:1;transform:scale(1.1);animation-timing-function:cubic-bezier(.37,0,.63,1)}
  34%{opacity:.9;transform:scale(1) translateY(-4px);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  46%,100%{opacity:0;transform:scale(.7) translateY(-10px)}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition:none !important}
  .wd,.wd *,.logo,.logo *,.cf-spark{animation:none !important}
  .wd--vuelta .wd-f1{opacity:1}
  .cf-doc{display:none}
}