/* =========================================================
   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}}

/* 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}

/* =========================================================
   LOGO ANIMADO (hero y componente pose="logo")
   Partes: .w-head  .w-eye  .w-hand  .w-ring
   ========================================================= */
.logo{overflow:visible;display:block}
.logo .w-head{transform-box:fill-box;transform-origin:50% 100%}
.logo .w-eyes{transition:transform .35s cubic-bezier(.3,1.3,.5,1)}
.logo .w-eye{transform-box:fill-box;transform-origin:center}
.logo .w-hand{transform-box:fill-box;transform-origin:22% 14%}
.logo .w-ring{transform-box:fill-box;transform-origin:center;opacity:0}
.logo--vivo{animation:wFloat 4.2s ease-in-out infinite}
.logo--vivo .w-eye{animation:wBlink 4.6s infinite}
.logo--vivo .w-hand{animation:wWaveSome 7s ease-in-out infinite}
.logo--vivo .w-ring{animation:wRing 2.6s ease-out infinite}
.logo--vivo .w-ring2{animation-delay:1.3s}
.logo--saludo .w-hand{animation:wWave 1.6s ease-in-out infinite}
.logo--saludo .w-eye{animation:wBlink 3.4s infinite}
.logo--saludo .w-head{animation:wTilt 3.2s ease-in-out infinite}
.logo--parpadeo .w-eye{animation:wBlink 3s infinite}
@keyframes wFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}
@keyframes wBlink{0%,90%,100%{transform:scaleY(1)}94%{transform:scaleY(.08)}}
@keyframes wWave{0%,100%{transform:rotate(0)}25%{transform:rotate(-16deg)}75%{transform:rotate(8deg)}}
@keyframes wWaveSome{0%,70%,100%{transform:rotate(0)}76%{transform:rotate(-16deg)}82%{transform:rotate(8deg)}88%{transform:rotate(-12deg)}94%{transform:rotate(4deg)}}
@keyframes wTilt{0%,100%{transform:rotate(0)}50%{transform:rotate(-3deg)}}
@keyframes wRing{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.9);opacity:0}}

/* =========================================================
   MASCOTA WANDI · una animación por pose
   Cada pose (Wandi.dc.html) usa estas piezas:
   .wd-all  cuerpo completo     .wd-eye  ojos (parpadeo)
   .wd-ant  antena              .wd-fx / .wd-fx2  efectos
   .wd-heart corazón  .wd-wink ojo guiñado  .wd-tear lágrimas
   .wd-z1..z3 zzz     .wd-f1..f4 cuadros de la vuelta
   Para cambiar una animación, edita solo el bloque de su pose.
   ========================================================= */
.wd{display:block;width:100%;height:100%;overflow:visible}
.wd g{transform-box:fill-box}
.wd-all{transform-origin:50% 100%}
.wd-eye{transform-origin:50% 50%}
.wd-ant{transform-origin:20% 100%}
.wd-fx,.wd-fx2,.wd-heart,.wd-wink{transform-origin:50% 50%}

/* normal: flota, parpadea y mueve la antena */
.wd--normal .wd-all{animation:wdFloat 3.6s ease-in-out infinite}
.wd--normal .wd-eye{animation:wdBlink 4.2s infinite}
.wd--normal .wd-ant{animation:wdAnt 2.4s ease-in-out infinite}
/* saludando: se mece de lado a lado */
.wd--saludando .wd-all{animation:wdRock 1.4s ease-in-out infinite}
.wd--saludando .wd-fx{animation:wdFlick 1.4s ease-in-out infinite}
.wd--saludando .wd-eye{animation:wdBlink 3.8s infinite}
/* guiño: inclina la cabeza y aprieta el ojo */
.wd--guino .wd-all{animation:wdTilt 2.6s ease-in-out infinite}
.wd--guino .wd-wink{animation:wdWink 2.6s ease-in-out infinite}
.wd--guino .wd-fx{animation:wdSpark 1.3s ease-in-out infinite}
/* feliz: salta */
.wd--feliz .wd-all{animation:wdHop 1.3s cubic-bezier(.3,0,.4,1) infinite}
.wd--feliz .wd-fx{animation:wdFlick 1.3s ease-in-out infinite}
/* emocionado: vibra de la emoción */
.wd--emocionado .wd-all{animation:wdJiggle .5s ease-in-out infinite}
.wd--emocionado .wd-fx{animation:wdFlick .5s ease-in-out infinite}
.wd--emocionado .wd-fx2{animation:wdFlick .5s ease-in-out .25s infinite}
.wd--emocionado .wd-eye{animation:wdBlink 3s infinite}
.wd--emocionado .wd-ant{animation:wdAnt .5s ease-in-out infinite}
/* corazón: el corazón late y sale otro flotando */
.wd--corazon .wd-all{animation:wdFloat 3.2s ease-in-out infinite}
.wd--corazon .wd-heart{animation:wdBeat 1.1s ease-in-out infinite}
.wd--corazon .wd-fx{animation:wdRise 2.6s ease-out infinite}
.wd--corazon .wd-eye{animation:wdBlink 4s infinite}
.wd--corazon .wd-ant{animation:wdAnt 2.2s ease-in-out infinite}
/* curioso: ladea la cabeza */
.wd--curioso .wd-all{animation:wdCurious 3.4s ease-in-out infinite}
.wd--curioso .wd-eye{animation:wdBlink 3.4s infinite}
.wd--curioso .wd-fx{animation:wdSpark 1.7s ease-in-out infinite}
.wd--curioso .wd-ant{animation:wdAnt 1.7s ease-in-out infinite}
/* pensativo: mira alrededor y las burbujas suben */
.wd--pensativo .wd-all{animation:wdFloat 4s ease-in-out infinite}
.wd--pensativo .wd-eyes{animation:wdLook 4s ease-in-out infinite}
.wd--pensativo .wd-fx{animation:wdBubble 2.4s ease-in-out infinite}
.wd--pensativo .wd-fx2{animation:wdBubble 2.4s ease-in-out .5s infinite}
/* sorprendido: brinca del susto */
.wd--sorprendido .wd-all{animation:wdShock 2s ease-out infinite}
.wd--sorprendido .wd-fx{animation:wdPop 2s ease-out infinite}
.wd--sorprendido .wd-fx2{animation:wdPop 2s ease-out .12s infinite}
.wd--sorprendido .wd-ant{animation:wdAnt .6s ease-in-out infinite}
.wd--sorprendido .wd-eye{animation:wdBlink 2s infinite}
/* dormido: respira y suben las zzz */
.wd--dormido .wd-all{animation:wdBreath 3.2s ease-in-out infinite}
.wd--dormido .wd-z1{animation:wdZ 3s ease-out infinite}
.wd--dormido .wd-z2{animation:wdZ 3s ease-out 1s infinite}
.wd--dormido .wd-z3{animation:wdZ 3s ease-out 2s infinite}
/* escondido: se asoma desde atrás */
.wd--escondido .wd-all{animation:wdPeek 3.4s ease-in-out infinite;transform-origin:100% 100%}
.wd--escondido .wd-eye{animation:wdBlink 3.4s infinite}
.wd--escondido .wd-fx{animation:wdSpark 1.7s ease-in-out infinite}
.wd--escondido .wd-ant{animation:wdAnt 1.7s ease-in-out infinite}
/* triste: se balancea y caen lágrimas */
.wd--triste .wd-all{animation:wdSway 4s ease-in-out infinite}
.wd--triste .wd-tear{animation:wdTear 1.8s ease-in infinite;transform-box:fill-box}
.wd--triste .wd-tear2{animation-delay:.9s}
/* vuelta: gira mostrando frente, lado y espalda */
.wd--vuelta .wd-all{animation:wdFloat 2.8s ease-in-out 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 2.8s infinite}

/* Sin animación (prop animate = false) */
.wdw--still *,.wdw--still{animation:none !important}
.wdw--still .wd--vuelta .wd-f1{opacity:1}

@keyframes wdBlink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes wdFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes wdAnt{0%,100%{transform:rotate(0)}50%{transform:rotate(-12deg)}}
@keyframes wdRock{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes wdFlick{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.75)}}
@keyframes wdTilt{0%,100%{transform:rotate(0) translateY(0)}50%{transform:rotate(-5deg) translateY(-3px)}}
@keyframes wdWink{0%,35%,65%,100%{transform:scale(1)}50%{transform:scale(1.2,.6)}}
@keyframes wdSpark{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
@keyframes wdHop{0%,100%{transform:translateY(0) scale(1.05,.95)}15%{transform:translateY(0) scale(1)}50%{transform:translateY(-10px) scale(.97,1.04)}85%{transform:translateY(0) scale(1)}}
@keyframes wdJiggle{0%,100%{transform:rotate(-3deg) translateY(0)}50%{transform:rotate(3deg) translateY(-3px)}}
@keyframes wdBeat{0%,100%{transform:scale(1)}15%{transform:scale(1.2)}30%{transform:scale(1)}45%{transform:scale(1.12)}60%{transform:scale(1)}}
@keyframes wdRise{0%{transform:translate(0,0) scale(.6);opacity:0}20%{opacity:1;transform:translate(-2px,-4px) scale(1)}100%{transform:translate(-6px,-24px) scale(.8);opacity:0}}
@keyframes wdCurious{0%,100%{transform:rotate(0)}30%{transform:rotate(-7deg)}60%{transform:rotate(4deg)}}
@keyframes wdLook{0%,100%{transform:translate(0,0)}25%,45%{transform:translate(3px,-3px)}65%,85%{transform:translate(-3px,-2px)}}
@keyframes wdBubble{0%,100%{transform:translateY(0) scale(1);opacity:1}50%{transform:translateY(-5px) scale(1.15);opacity:.55}}
@keyframes wdShock{0%{transform:scale(1)}8%{transform:scale(1.08,.92)}16%{transform:translateY(-7px) scale(.95,1.06)}30%,100%{transform:translateY(0) scale(1)}}
@keyframes wdPop{0%{transform:scale(.3);opacity:0}12%{transform:scale(1.25);opacity:1}24%,80%{transform:scale(1);opacity:1}100%{transform:scale(1);opacity:0}}
@keyframes wdBreath{0%,100%{transform:scale(1,1)}50%{transform:scale(1.02,.95)}}
@keyframes wdZ{0%{transform:translate(0,6px) scale(.6);opacity:0}25%{opacity:1}100%{transform:translate(6px,-10px) scale(1.05);opacity:0}}
@keyframes wdPeek{0%,20%,100%{transform:translateX(0) rotate(0)}40%,70%{transform:translateX(-4px) rotate(-8deg)}}
@keyframes wdSway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes wdTear{0%{transform:translateY(0);opacity:0}20%{opacity:1}100%{transform:translateY(9px);opacity:0}}
@keyframes wdFrame{0%{opacity:1}25%,100%{opacity:0}}

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