/* ===== Extras: logo animado, asistente, diseñador y movimiento ===== */

/* Logo circular con rayo animado */
.emblem{--s:220px;position:relative;width:var(--s);height:var(--s);border-radius:50%;flex:none}
.emblem img{width:100%;height:100%;border-radius:50%;animation:emGlow 3.2s ease-in-out infinite}
.emblem .em-bolt{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.emblem .em-bolt polygon{fill:#bfeaff;opacity:0;filter:drop-shadow(0 0 18px #3aafe0) drop-shadow(0 0 40px #3aafe0);animation:bolt 3.2s ease-in-out infinite}
.emblem.big{--s:min(300px,70vw)}
.emblem.small{--s:120px;margin-bottom:12px}
.emblem.tiny{--s:46px}
.emblem.brand-em{--s:46px}
@media (max-width:560px){.emblem.brand-em{--s:38px}}
.cl-card.bb .emblem{--s:240px}
@keyframes emGlow{0%,100%{box-shadow:0 0 0 0 rgba(58,175,224,0)}50%{box-shadow:0 0 50px 4px rgba(58,175,224,.45)}}
@keyframes bolt{0%,38%,100%{opacity:0}40%{opacity:1}43%{opacity:.15}46%{opacity:1}56%{opacity:0}}

/* Pantalla de carga */
.loader{position:fixed;inset:0;z-index:200;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:28px;transition:opacity .4s,visibility .4s}
.loader.done{opacity:0;visibility:hidden}
.loader .emblem{animation:ldIn .6s cubic-bezier(.2,.8,.2,1) both}
.loader .em-bolt polygon{animation:bolt .8s ease-in-out .25s 1}
.ld-bar{width:160px;height:3px;border-radius:3px;background:#1d2026;overflow:hidden}
.ld-bar span{display:block;height:100%;width:100%;background:linear-gradient(90deg,#1d8fd0,#3aafe0,#bfeaff);transform-origin:left;animation:ldBar .9s ease-out both}
@keyframes ldIn{from{opacity:0;transform:scale(.6) rotate(-20deg)}to{opacity:1;transform:none}}
@keyframes ldBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Barra de progreso de lectura */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;z-index:120;background:linear-gradient(90deg,#1d8fd0,#3aafe0,#8dc63f);transform-origin:left;transform:scaleX(0);pointer-events:none}

/* Brillo que recorre los botones principales */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:shine 4.5s ease-in-out infinite}
@keyframes shine{0%,70%{left:-60%}100%{left:130%}}

/* Luz que sigue al ratón en la portada */
.hero{--mx:50%;--my:40%}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(420px circle at var(--mx) var(--my),rgba(58,175,224,.16),transparent 60%);z-index:1}
.hero-in{position:relative;z-index:2}
.hero-vis{transition:transform .25s ease-out}

/* Inclinación 3D al pasar el ratón */
.tilt{transform-style:preserve-3d;will-change:transform}
.tilt-glare{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.14),transparent 55%);opacity:0;transition:opacity .3s;z-index:3}
.tilt:hover .tilt-glare{opacity:1}

/* Títulos que aparecen palabra a palabra */
.split .w{display:inline-block;opacity:0;transform:translateY(.6em) rotate(3deg);filter:blur(6px);transition:opacity .6s,transform .6s cubic-bezier(.2,.8,.2,1),filter .6s}
.split.vis .w{opacity:1;transform:none;filter:none}
.kicker{position:relative}
.sec-head .kicker::after{content:"";display:block;height:2px;width:0;margin:8px auto 0;background:var(--blue);transition:width .9s .3s cubic-bezier(.2,.8,.2,1)}
.sec-head.vis .kicker::after{width:46px}

/* Botón flotante del asistente */
.wiz-float{position:fixed;left:20px;bottom:22px;z-index:60;display:flex;align-items:center;gap:8px;padding:12px 18px;border-radius:40px;border:1px solid rgba(58,175,224,.5);background:rgba(20,21,24,.9);backdrop-filter:blur(10px);cursor:pointer;box-shadow:0 10px 30px -10px var(--glow);animation:floaty 3s ease-in-out infinite}
.wiz-float span{font-size:1.1rem}
.wiz-float b{font-size:.88rem}
.wiz-float:hover{border-color:var(--blue);background:#1d2026}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* Asistente */
.wiz{position:fixed;inset:0;z-index:95;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;visibility:hidden;transition:.3s}
.wiz.open{opacity:1;visibility:visible}
.wiz-bg{position:absolute;inset:0;background:rgba(5,6,8,.8);backdrop-filter:blur(6px)}
.wiz-box{position:relative;width:min(760px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--bg2);border:1px solid var(--line);border-radius:24px;padding:28px;transform:translateY(20px) scale(.97);transition:.4s var(--ease)}
.wiz.open .wiz-box{transform:none}
.wiz-box .modal-x{position:absolute;top:14px;right:14px}
.wiz-top{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.wiz-top small{color:var(--blue);font-weight:700;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase}
.wiz-top h3{font-size:1.3rem}
.wiz-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:22px}
.wiz-steps span{height:4px;border-radius:4px;background:var(--line);transition:.4s}
.wiz-steps span.on{background:var(--blue);box-shadow:0 0 10px var(--glow)}
.wiz-q{animation:wq .45s var(--ease) both}
@keyframes wq{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}
.wiz-q h4{font-size:1.15rem;margin-bottom:4px}
.wiz-q>p{color:var(--muted);font-size:.9rem;margin-bottom:18px}
.wiz-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.wiz-opt{display:flex;align-items:center;gap:14px;text-align:left;padding:16px;border-radius:16px;border:1px solid var(--line);background:var(--panel);cursor:pointer;transition:.25s var(--ease)}
.wiz-opt:hover{border-color:var(--blue);transform:translateY(-3px);box-shadow:0 12px 30px -16px var(--glow)}
.wiz-opt i{font-style:normal;font-size:1.7rem;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--panel2);flex:none}
.wiz-opt b{display:block;font-size:.95rem}
.wiz-opt small{color:var(--muted);font-size:.78rem;line-height:1.35}
.wiz-back{margin-top:16px;background:none;border:0;color:var(--muted);cursor:pointer;font-size:.85rem}
.wiz-back:hover{color:#fff}
.wiz-res{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:6px 0 18px}
.wiz-p{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel);animation:wq .5s var(--ease) both}
.wiz-p .im{height:120px;background:#fff;display:flex;align-items:center;justify-content:center;padding:8px;cursor:zoom-in}
.wiz-p .im img{max-height:100%;max-width:100%;object-fit:contain}
.wiz-p .tx{padding:10px 12px 12px}
.wiz-p small{color:var(--blue);font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.wiz-p h5{font-size:.82rem;line-height:1.3;margin:2px 0 8px}
.wiz-p .why{font-size:.72rem;color:var(--muted);line-height:1.35}
.wiz-p .c-add{position:absolute;top:8px;right:8px}
.wiz-sum{background:var(--panel);border:1px dashed var(--line);border-radius:14px;padding:12px 14px;font-size:.85rem;color:#c4cbd3;margin-bottom:16px}
.wiz-sum b{color:#fff}
.wiz-act{display:flex;flex-wrap:wrap;gap:10px}

@media (max-width:980px){
  .wiz-res{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  /* botones flotantes en el móvil: más pequeños y el asistente aparece al bajar */
  .wiz-float b{display:none}
  .wiz-float{padding:0;width:48px;height:48px;justify-content:center;left:14px;bottom:16px;animation:none;opacity:0;transform:translateY(16px) scale(.9);pointer-events:none;transition:opacity .35s,transform .35s}
  .wiz-float.show{opacity:1;transform:none;pointer-events:auto}
  .wa-float{width:50px;height:50px;right:14px;bottom:16px}
  .wa-float svg{width:26px}
  .wiz-box{padding:20px 16px}
  .wiz-opts{grid-template-columns:1fr}
  .wiz-opt{padding:12px}
  .cl-card.bb .emblem{--s:200px}
}
@media (prefers-reduced-motion:reduce){.split .w{opacity:1;transform:none;filter:none}.loader{display:none}}