/* SOPORTÍN — estilos del portal nuevo. Van con /assets/soportin.js (v6). */

#soportin-layer{position:fixed;inset:0;z-index:8999;pointer-events:none;overflow:hidden}

/* ---------- Personaje (mismas animaciones que en producción) ---------- */
#soportin{position:fixed;bottom:26px;left:60px;pointer-events:auto;cursor:pointer;z-index:9000;transition:filter .3s;will-change:transform,left}
#soportin:hover{filter:drop-shadow(0 0 18px rgba(244,104,0,.55))}
#soportin.flip svg{transform:scaleX(-1)}
@keyframes s-idle{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
#soportin.idle{animation:s-idle 2.5s ease-in-out infinite}
@keyframes s-walk{0%,100%{transform:translateY(0) rotate(0)}20%{transform:translateY(-5px) rotate(-3deg)}50%{transform:translateY(0) rotate(0)}70%{transform:translateY(-5px) rotate(3deg)}}
#soportin.walking{animation:s-walk .5s ease-in-out infinite}
#soportin.running{animation:s-walk .28s ease-in-out infinite}
@keyframes s-jump{0%{transform:translateY(0) scale(1)}10%{transform:translateY(4px) scaleX(1.15) scaleY(.8)}35%{transform:translateY(-70px) scaleX(.9) scaleY(1.12)}55%{transform:translateY(-75px) scale(1)}80%{transform:translateY(5px) scaleX(1.1) scaleY(.85)}100%{transform:translateY(0) scale(1)}}
#soportin.jumping{animation:s-jump .8s cubic-bezier(.2,0,.3,1) forwards}
@keyframes s-wave{0%,100%{transform:rotate(0)}15%{transform:rotate(-12deg)}30%{transform:rotate(8deg)}45%{transform:rotate(-12deg)}60%{transform:rotate(8deg)}75%{transform:rotate(-8deg)}}
#soportin.waving{animation:s-wave 1.2s ease-in-out forwards}
@keyframes s-dance{0%,100%{transform:translateY(0) rotate(-5deg) scale(1)}25%{transform:translateY(-10px) rotate(5deg) scale(1.05)}50%{transform:translateY(0) rotate(-5deg) scale(1)}75%{transform:translateY(-10px) rotate(5deg) scale(1.05)}}
#soportin.dancing{animation:s-dance .4s ease-in-out infinite}
@keyframes s-think{0%,100%{transform:rotate(0) translateY(0)}50%{transform:rotate(8deg) translateY(-3px)}}
#soportin.thinking{animation:s-think 2s ease-in-out infinite}
@keyframes s-sit{0%{transform:scaleY(1)}100%{transform:scaleY(.88) translateY(4px)}}
#soportin.sitting{animation:s-sit .3s ease forwards}
@keyframes s-look{0%,100%{transform:translateX(0)}30%{transform:translateX(-4px)}70%{transform:translateX(4px)}}
#soportin.looking{animation:s-look 2.5s ease-in-out infinite}
@keyframes antenna-glow{0%,100%{opacity:1}50%{opacity:.4}}
#soportin .antenna-tip{animation:antenna-glow 2s ease-in-out infinite}
@keyframes eye-blink{0%,42%,46%,100%{transform:scaleY(1)}44%{transform:scaleY(.1)}}
#soportin .eye-l,#soportin .eye-r{animation:eye-blink 4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
#soportin .eye-r{animation-delay:.1s}

/* ---------- Globo de frase: píldora crema ---------- */
#sop-bubble{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(8px) scale(.92);
  background:#FFEFD6;box-shadow:inset 0 0 0 2px #FFCF8F,0 10px 30px rgba(6,6,51,.25);border-radius:999px;padding:10px 18px;
  font:700 13px/1.2 'MADE Tommy Soft','Figtree',sans-serif;color:#5A2600;white-space:nowrap;opacity:0;transition:opacity .3s,transform .4s cubic-bezier(.2,.8,.2,1);pointer-events:none}
#sop-bubble.show{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
#sop-bubble::after{content:'';position:absolute;bottom:-7px;left:50%;width:14px;height:14px;background:#FFEFD6;border-radius:3px;transform:translateX(-50%) rotate(45deg);box-shadow:2px 2px 0 #FFCF8F}

/* ---------- Botón de abrir: píldora crema como el resto del sitio ---------- */
#sop-cta{position:fixed;bottom:22px;right:20px;z-index:9001;display:flex;align-items:center;gap:8px;min-height:52px;padding:6px 22px 6px 8px;border:0;border-radius:999px;cursor:pointer;
  background:#FFEFD6;box-shadow:inset 0 0 0 2px #FFCF8F,0 12px 34px rgba(6,6,51,.32);color:#5A2600;font:700 15px/1 'MADE Tommy Soft','Figtree',sans-serif;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
#sop-cta svg{width:40px;height:40px;background:#fff;border-radius:50%;padding:3px;box-shadow:0 0 0 2px #F46800}
#sop-cta:hover{transform:translateY(-3px)}
#sop-cta:active{transform:scale(.97)}
#sop-cta:focus-visible,.sc-hdr .cb:focus-visible,.sc-inp button:focus-visible{outline:3px solid #0F71F2;outline-offset:3px}

/* ---------- Ventana de chat ---------- */
#sop-chat{position:fixed;bottom:20px;right:20px;width:390px;max-width:calc(100vw - 24px);height:560px;max-height:calc(100dvh - 96px);z-index:9002;display:none;flex-direction:column;overflow:hidden;
  background:#F2F7FF;border-radius:28px;box-shadow:0 0 0 2px #0F71F2,0 30px 80px rgba(6,6,51,.45);font-family:'Figtree',system-ui,sans-serif;color:#060633}
#sop-chat.open{display:flex;animation:chat-in .35s cubic-bezier(.2,.8,.2,1)}
@keyframes chat-in{from{opacity:0;transform:translateY(20px) scale(.96)}}

.sc-hdr{display:flex;align-items:center;gap:12px;flex-shrink:0;padding:16px 16px 16px 18px;background:#060A37;color:#fff}
.sc-hdr .av{width:46px;height:46px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;background:#fff;box-shadow:0 0 0 2px #F46800}
.sc-hdr .av svg{width:34px;height:34px}
.sc-hdr .nf{flex:1;min-width:0}
.sc-hdr .nf h3{margin:0;font:700 18px/1.1 'MADE Tommy Soft','Figtree',sans-serif;color:#fff;letter-spacing:0}
.sc-hdr .nf p{margin:4px 0 0;font-size:12.5px;color:#C9D8F5}
.sc-hdr .cb{width:40px;height:40px;flex-shrink:0;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(140,196,255,.18);color:#fff;cursor:pointer;transition:background-color .2s,transform .2s}
.sc-hdr .cb:hover{background:rgba(140,196,255,.34)}
.sc-hdr .cb:active{transform:scale(.92)}
.sc-hdr .cb svg{width:16px;height:16px}

.sc-msgs{flex:1;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:10px;scrollbar-width:thin;scrollbar-color:#B5D0FF transparent}
.sc-m{max-width:86%;padding:12px 16px;border-radius:20px;font-size:14.5px;line-height:1.5;overflow-wrap:anywhere;animation:m-in .3s cubic-bezier(.2,.8,.2,1)}
@keyframes m-in{from{opacity:0;transform:translateY(8px)}}
.sc-m.b{align-self:flex-start;background:#E3EEFF;color:#060633;border-bottom-left-radius:6px}
.sc-m.u{align-self:flex-end;background:#060633;color:#fff;border-bottom-right-radius:6px}
.sc-m .w{margin-bottom:3px;font:700 12px/1.2 'MADE Tommy Soft','Figtree',sans-serif;color:#03318C}
.sc-m.b a{color:#03318C!important}

.sc-m.b a{font-weight:600;text-decoration:underline;text-underline-offset:2px}

/* Tarjeta de transferencia a WhatsApp */
.sc-m.sc-hand{background:#E4F7EA;box-shadow:inset 0 0 0 1.5px #9ADBB1;border-radius:20px;max-width:92%;padding:14px 16px}
.sc-hand-t{font:700 13px/1.2 'MADE Tommy Soft','Figtree',sans-serif;color:#0B6B33;margin-bottom:6px}
.sc-hand-o{margin-bottom:8px;padding:8px 11px;border-radius:12px;background:#FFEFD6;box-shadow:inset 0 0 0 1.5px #FFCF8F;color:#6B2D00;font-size:12.5px;line-height:1.4}
.sc-hand p{margin:0 0 11px;font-size:13.5px;line-height:1.45;color:#1F3A2A}
.sc-m.sc-hand a{display:inline-flex;align-items:center;gap:7px;min-height:42px;padding:0 18px;border-radius:999px;background:#1FAF57;color:#04220F!important;font:700 13.5px/1 'MADE Tommy Soft','Figtree',sans-serif;text-decoration:none}
.sc-m.sc-hand a:hover{background:#27C465}

/* Accesos rápidos al abrir */
.sc-chips{display:flex;flex-wrap:wrap;gap:8px;flex-shrink:0;padding:0 16px 14px}
.sc-chips[hidden]{display:none}
.sc-chips button{min-height:40px;padding:0 15px;border:0;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px #B5D0FF;color:#03318C;cursor:pointer;font:700 13.5px/1 'MADE Tommy Soft','Figtree',sans-serif;transition:box-shadow .15s,transform .2s}
.sc-chips button:hover{box-shadow:inset 0 0 0 2px #0F71F2}
.sc-chips button:active{transform:scale(.96)}
.sc-chips button:focus-visible,.sc-m a:focus-visible{outline:3px solid #0F71F2;outline-offset:2px}
.sc-hdr .cb+.cb{margin-left:-4px}

.sc-tp{display:flex;gap:5px;align-self:flex-start;padding:14px 18px;border-radius:20px;border-bottom-left-radius:6px;background:#E3EEFF}
.sc-tp span{width:7px;height:7px;border-radius:50%;background:#0F71F2;animation:tp-b 1.4s ease-in-out infinite}
.sc-tp span:nth-child(2){animation-delay:.2s}.sc-tp span:nth-child(3){animation-delay:.4s}
@keyframes tp-b{0%,60%,100%{transform:translateY(0);opacity:.3}30%{transform:translateY(-6px);opacity:1}}

.sc-inp{display:flex;gap:8px;flex-shrink:0;padding:12px;background:#fff;box-shadow:0 -1.5px 0 #B5D0FF}
.sc-inp input{flex:1;min-width:0;height:50px;padding:0 18px;border-radius:999px;border:1.5px solid #C5CFE6;background:#fff;color:#060633;font:500 15px 'Figtree',system-ui,sans-serif;outline:0;transition:border-color .15s,box-shadow .15s}
.sc-inp input::placeholder{color:#7C86A8}
.sc-inp input:focus{border-color:#0F71F2;box-shadow:0 0 0 4px rgba(15,113,242,.18)}
.sc-inp button{width:50px;height:50px;flex-shrink:0;display:grid;place-items:center;border:0;border-radius:50%;background:#F46800;color:#060633;cursor:pointer;box-shadow:inset 0 -3px 0 rgba(6,6,51,.18);transition:transform .2s,background-color .2s}
.sc-inp button svg{width:18px;height:18px}
.sc-inp button:hover{background:#FF8A2B}
.sc-inp button:active{transform:scale(.93)}
.sc-inp button:disabled{opacity:.35}

@media (max-width:640px){
  #sop-chat{right:8px;bottom:8px;width:calc(100vw - 16px);height:calc(100dvh - 88px);max-height:none;border-radius:24px}
  #sop-cta{bottom:16px;right:14px;min-height:48px;font-size:14px;padding-right:18px}
  #sop-cta svg{width:36px;height:36px}
  /* En teléfono el personaje no camina por la pantalla: tapaba botones. Queda el botón "Hablar con Soportín". */
  #soportin{display:none}
}
@media (prefers-reduced-motion:reduce){
  #soportin,#soportin *,#sop-chat.open,.sc-m,.sc-tp span{animation:none!important}
}