/* ============================================================ AIRIS · Motor de recorrido guiado (tour.css) Estilos del overlay, spotlight, globo, cursor y ripple. Reutilizable por los 3 demos. Inerte hasta que tour.js agrega las clases al . ============================================================ */ :root{ --tour-ink:#0f1b2d; --tour-ink-2:#1a2942; --tour-cyan:#00d4ee; --tour-cyan-soft:#39c9e6; --tour-line:rgba(255,255,255,.12); --tour-shadow:0 18px 50px rgba(8,18,38,.45); } /* Oculta el cursor real del SO durante la grabación (cursor falso lo reemplaza) */ body.airis-tour-nocursor, body.airis-tour-nocursor *{cursor:none !important} /* ---------- Capa de oscurecimiento + spotlight ---------- */ .airis-tour-layer{ position:fixed;inset:0;z-index:99990;pointer-events:none; opacity:0;transition:opacity .35s ease; } .airis-tour-layer.on{opacity:1} /* El "agujero" de luz: un rect transparente con sombra gigante que oscurece todo lo demás */ .airis-tour-hole{ position:fixed;top:0;left:0;width:0;height:0;border-radius:14px; box-shadow:0 0 0 9999px rgba(9,16,32,.62); outline:1.5px solid var(--tour-cyan); outline-offset:0; transition:box-shadow .35s ease; will-change:left,top,width,height; } .airis-tour-hole::after{ /* aro cian tenue alrededor del foco */ content:'';position:absolute;inset:-4px;border-radius:16px; box-shadow:0 0 0 1px rgba(0,212,238,.35),0 0 22px 2px rgba(0,212,238,.22); pointer-events:none; } /* ---------- Globo educativo (tooltip) ---------- */ .airis-tour-tip{ position:fixed;z-index:99995;max-width:340px;width:max-content;min-width:230px; background:linear-gradient(180deg,var(--tour-ink),var(--tour-ink-2)); color:#eaf1fb;border:1px solid var(--tour-line);border-radius:14px; box-shadow:var(--tour-shadow);padding:1rem 1.1rem 1.05rem; font-family:'Outfit',system-ui,sans-serif; opacity:0;transform:translateY(6px) scale(.98); transition:opacity .3s ease,transform .3s ease;pointer-events:none; } .airis-tour-tip.on{opacity:1;transform:none;pointer-events:auto} .airis-tour-kicker{ font-family:'Sora','Outfit',sans-serif;font-size:.6rem;font-weight:600; letter-spacing:.18em;text-transform:uppercase;color:var(--tour-cyan-soft); display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem; } .airis-tour-kicker .dot{width:6px;height:6px;border-radius:50%;background:var(--tour-cyan); box-shadow:0 0 8px 1px rgba(0,212,238,.7)} .airis-tour-title{ font-family:'Sora','Outfit',sans-serif;font-size:1.02rem;font-weight:600; letter-spacing:-.01em;line-height:1.25;margin-bottom:.35rem;color:#fff; } .airis-tour-body{font-size:.83rem;line-height:1.55;color:#c4d0e2} .airis-tour-body b{color:#fff;font-weight:600} /* Flechita del globo hacia el foco */ .airis-tour-tip .arrow{position:absolute;width:12px;height:12px; background:var(--tour-ink);border:1px solid var(--tour-line);transform:rotate(45deg)} .airis-tour-tip[data-side="top"] .arrow{bottom:-7px;left:calc(var(--ax,50%) - 6px);border-top:none;border-left:none} .airis-tour-tip[data-side="bottom"] .arrow{top:-7px;left:calc(var(--ax,50%) - 6px);border-bottom:none;border-right:none} .airis-tour-tip[data-side="left"] .arrow{right:-7px;top:calc(var(--ay,50%) - 6px);border-left:none;border-bottom:none} .airis-tour-tip[data-side="right"] .arrow{left:-7px;top:calc(var(--ay,50%) - 6px);border-right:none;border-top:none} /* Pie del globo: progreso + controles */ .airis-tour-foot{display:flex;align-items:center;justify-content:space-between; gap:.8rem;margin-top:.85rem;padding-top:.7rem;border-top:1px solid var(--tour-line)} .airis-tour-steps{display:flex;gap:.32rem;align-items:center} .airis-tour-steps i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.22); transition:.25s;display:block} .airis-tour-steps i.on{background:var(--tour-cyan);width:16px;border-radius:3px} .airis-tour-ctrls{display:flex;gap:.4rem} .airis-tour-btn{font-family:'Sora','Outfit',sans-serif;font-size:.68rem;font-weight:600; padding:.34rem .7rem;border-radius:999px;border:1px solid var(--tour-line); background:rgba(255,255,255,.04);color:#c4d0e2;cursor:pointer;transition:.2s} .airis-tour-btn:hover{border-color:var(--tour-cyan);color:#fff;background:rgba(0,212,238,.1)} .airis-tour-btn.primary{background:var(--tour-cyan);color:#04121a;border-color:var(--tour-cyan)} .airis-tour-btn.primary:hover{background:#3fe0f5} /* Chip flotante "Recorrido" arriba (solo modo interactivo) */ .airis-tour-badge{ position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:99996; font-family:'Sora','Outfit',sans-serif;font-size:.64rem;font-weight:600;letter-spacing:.12em; text-transform:uppercase;color:#eaf1fb;background:rgba(15,27,45,.85);backdrop-filter:blur(8px); border:1px solid var(--tour-line);border-radius:999px;padding:.4rem .9rem; display:flex;align-items:center;gap:.5rem;box-shadow:var(--tour-shadow); opacity:0;transition:opacity .35s ease;pointer-events:none} .airis-tour-badge.on{opacity:1} .airis-tour-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--tour-cyan); animation:airisTourPulse 2s ease infinite} @keyframes airisTourPulse{0%,100%{opacity:1}50%{opacity:.4}} .airis-tour-skip{margin-left:.3rem;color:#8ea2bd;cursor:pointer;pointer-events:auto; border-bottom:1px solid transparent;transition:.2s} .airis-tour-skip:hover{color:#fff;border-bottom-color:var(--tour-cyan)} /* ---------- Cursor falso + ripple de click ---------- */ .airis-tour-cursor{ position:fixed;z-index:99999;top:0;left:0;width:26px;height:26px;pointer-events:none; transform:translate(-3px,-2px);opacity:0;transition:opacity .3s ease; filter:drop-shadow(0 3px 5px rgba(0,0,0,.35));will-change:left,top} .airis-tour-cursor.on{opacity:1} .airis-tour-ripple{ position:fixed;z-index:99998;width:14px;height:14px;border-radius:50%;pointer-events:none; border:2px solid var(--tour-cyan);transform:translate(-50%,-50%) scale(.3);opacity:0} .airis-tour-ripple.go{animation:airisTourRipple .6s ease-out} @keyframes airisTourRipple{ 0%{opacity:.9;transform:translate(-50%,-50%) scale(.3)} 100%{opacity:0;transform:translate(-50%,-50%) scale(3.4)} } /* ---------- Barra de reproductor (modo embebido ?player=1) ---------- */ .airis-tour-player{ position:fixed;bottom:16px;left:50%;transform:translateX(-50%) translateY(6px);z-index:99997; display:flex;align-items:center;gap:.5rem; background:rgba(15,27,45,.9);backdrop-filter:blur(10px); border:1px solid var(--tour-line);border-radius:999px;padding:.4rem .5rem; box-shadow:var(--tour-shadow);opacity:0;transition:opacity .35s ease,transform .35s ease; pointer-events:none} .airis-tour-player.on{opacity:1;transform:translateX(-50%);pointer-events:auto} .airis-tour-pbtn{ display:flex;align-items:center;justify-content:center;gap:.4rem; height:34px;min-width:34px;padding:0 .55rem;border-radius:999px;cursor:pointer; border:1px solid transparent;background:transparent;color:#c4d0e2;transition:.18s; font-family:'Sora','Outfit',sans-serif;font-size:.72rem;font-weight:600} .airis-tour-pbtn:hover{background:rgba(255,255,255,.08);color:#fff} .airis-tour-pbtn:disabled{opacity:.35;cursor:default;background:transparent} .airis-tour-pbtn svg{width:15px;height:15px;flex-shrink:0} .airis-tour-pbtn.play{background:var(--tour-cyan);color:#04121a;min-width:40px} .airis-tour-pbtn.play:hover{background:#3fe0f5;color:#04121a} .airis-tour-pcount{font-family:'Sora','Outfit',sans-serif;font-size:.7rem;font-weight:600; color:#8ea2bd;font-variant-numeric:tabular-nums;padding:0 .5rem;white-space:nowrap} /* Contenedor con zoom: evita scrollbar horizontal durante la animación */ body.airis-tour-active{overflow-x:hidden} @media(max-width:560px){ .airis-tour-tip{max-width:86vw;min-width:0} }