/* ============================================================
   TUTORIAL GUIADO (onboarding) — spotlight + tooltip
   ============================================================ */
.tutor-overlay{ position:fixed; inset:0; z-index:9999; pointer-events:auto;
  font-family:'Inter',system-ui,sans-serif; opacity:0; transition:opacity .25s ease; }
.tutor-overlay.show{ opacity:1; }
.tutor-overlay[hidden]{ display:none; }

/* Bloqueador de cliques (transparente) */
.tutor-dim{ position:absolute; inset:0; background:transparent; }

/* Recorte iluminado (spotlight): o box-shadow gigante escurece o resto da tela */
.tutor-spot{ position:absolute; left:0; top:0; width:0; height:0; border-radius:16px;
  box-shadow:0 0 0 9999px rgba(4,8,20,.80);
  outline:2px solid rgba(245,192,67,.9); outline-offset:2px;
  transition:left .35s cubic-bezier(.4,0,.2,1), top .35s cubic-bezier(.4,0,.2,1),
             width .35s cubic-bezier(.4,0,.2,1), height .35s cubic-bezier(.4,0,.2,1),
             opacity .25s ease;
  pointer-events:none; }
.tutor-spot::after{ content:''; position:absolute; inset:-4px; border-radius:18px;
  box-shadow:0 0 22px 4px rgba(245,192,67,.55); animation:tutorPulse 1.8s ease-in-out infinite; }
@keyframes tutorPulse{ 0%,100%{opacity:.55;} 50%{opacity:1;} }
.tutor-spot.full{ box-shadow:0 0 0 9999px rgba(4,8,20,.82); outline:none; }
.tutor-spot.full::after{ display:none; }

/* Modo "dois quadrados": tela escura (spot.full) + uma moldura por alvo */
.tutor-rings{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.tutor-ring{ position:absolute; border-radius:14px; outline:2px solid rgba(245,192,67,.95); outline-offset:2px;
  box-shadow:0 0 22px 4px rgba(245,192,67,.55); animation:tutorPulse 1.8s ease-in-out infinite; }

/* Card / tooltip */
.tutor-card{ position:absolute; width:min(330px,86vw); z-index:2;
  background:linear-gradient(180deg,rgba(22,32,62,.98),rgba(10,15,34,.99));
  border:1px solid rgba(245,192,67,.4); border-radius:18px; padding:18px 18px 16px;
  box-shadow:0 18px 50px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  transform:translateY(8px); opacity:0; transition:transform .3s cubic-bezier(.2,.9,.25,1), opacity .3s ease;
  pointer-events:auto; }
.tutor-card.in{ transform:translateY(0); opacity:1; }

.tutor-step{ font-family:'Oswald',sans-serif; font-size:11px; letter-spacing:.16em; font-weight:600;
  color:#9fb0d8; text-transform:uppercase; margin-bottom:4px; }
.tutor-title{ margin:0 0 6px; font-family:'Oswald',sans-serif; font-weight:700; font-size:20px;
  letter-spacing:.02em; color:var(--gold-l,#ffe79a); text-shadow:0 0 14px rgba(245,192,67,.4); }
.tutor-desc{ margin:0 0 14px; font-size:13.5px; line-height:1.5; color:#d6e0f5; }

.tutor-dots{ display:flex; gap:6px; margin-bottom:14px; flex-wrap:wrap; }
.tutor-dots i{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.22); transition:.25s; }
.tutor-dots i.on{ background:var(--gold,#f5c043); box-shadow:0 0 8px rgba(245,192,67,.8); transform:scale(1.15); }

.tutor-actions{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.tutor-skip{ background:none; border:0; color:#8ea0c8; font-size:12.5px; cursor:pointer; padding:8px 4px;
  text-decoration:underline; }
.tutor-skip:hover{ color:#cfe; }
.tutor-next{ cursor:pointer; border:0; border-radius:12px; padding:11px 20px;
  font-family:'Oswald',sans-serif; font-weight:700; font-size:14px; letter-spacing:.04em; color:#06210f;
  background:linear-gradient(180deg,#ffe79a,#f5c043 60%,#e0a92a);
  box-shadow:0 6px 16px rgba(245,192,67,.35), inset 0 1px 0 rgba(255,255,255,.5); }
.tutor-next:hover{ filter:brightness(1.05); }
.tutor-next:active{ transform:translateY(1px); }

/* Elementos pulsando acima do escurecimento (ex.: setas no passo 1) */
.tutor-pulse{ z-index:10000 !important; animation:tutorElPulse 1.2s ease-in-out infinite; }
@keyframes tutorElPulse{
  0%,100%{ filter:drop-shadow(0 0 6px rgba(245,192,67,.65)); transform:scale(1); }
  50%{ filter:drop-shadow(0 0 16px rgba(245,192,67,1)); transform:scale(1.12); }
}

@media (max-width:380px){
  .tutor-card{ padding:15px 15px 13px; }
  .tutor-title{ font-size:18px; }
  .tutor-desc{ font-size:12.5px; }
}