#tut{position:fixed; inset:0; z-index:190; opacity:0; visibility:hidden;
  transition:opacity .5s ease, visibility .5s; pointer-events:none;}
#tut.aberto{opacity:1; visibility:visible;}
/* o "buraco" iluminado: escurece tudo em volta e destaca o alvo */
#tutFoco{position:absolute; border-radius:14px;
  box-shadow:0 0 0 200vmax rgba(3,7,14,.78), 0 0 0 3px rgba(232,180,90,.9), 0 0 34px 8px rgba(232,180,90,.35);
  transition:top .55s cubic-bezier(.34,1.15,.4,1), left .55s cubic-bezier(.34,1.15,.4,1),
             width .55s cubic-bezier(.34,1.15,.4,1), height .55s cubic-bezier(.34,1.15,.4,1);
  pointer-events:none;}
#tutFoco::after{content:""; position:absolute; inset:-7px; border-radius:inherit;
  border:2px solid rgba(232,180,90,.55); animation:tutPulse 1.9s ease infinite;}
@keyframes tutPulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.14);opacity:0}}
#tutCard{position:absolute; max-width:330px; width:calc(100vw - 32px); pointer-events:auto;
  background:linear-gradient(180deg, rgba(18,32,58,.97), rgba(9,18,34,.97));
  border:1px solid rgba(232,180,90,.4); border-radius:16px; padding:18px 18px 14px;
  color:#e8ecf4; box-shadow:0 18px 60px rgba(0,0,0,.6);
  transition:top .55s cubic-bezier(.34,1.15,.4,1), left .55s cubic-bezier(.34,1.15,.4,1);
  font-family:'Cormorant Garamond',Georgia,serif;}
#tutCard h4{font-family:'Cinzel',Georgia,serif; color:#e8c874; font-size:.95rem; letter-spacing:.06em; margin:0 0 6px;}
#tutCard p{margin:0 0 14px; font-size:1.02rem; line-height:1.55; color:#c9d4e4;}
.tut-passo{font-family:'Cinzel',Georgia,serif; font-size:.6rem; letter-spacing:.16em; color:#e8b45a;
  opacity:.85; margin-bottom:7px; text-transform:uppercase;}
.tut-acoes{display:flex; align-items:center; justify-content:space-between; gap:10px;}
#tutPular{background:none; border:none; color:#7690ac; font-family:'Cinzel',Georgia,serif;
  font-size:.64rem; letter-spacing:.08em; cursor:pointer; padding:6px 2px; text-transform:uppercase;}
#tutPular:hover{color:#aec4dd; text-decoration:underline;}
#tutProx{font-family:'Cinzel',Georgia,serif; font-size:.7rem; letter-spacing:.08em; cursor:pointer;
  padding:9px 18px; border-radius:999px; border:1px solid #e8b45a; background:#e8b45a; color:#2a1a08;
  box-shadow:0 0 18px rgba(232,180,90,.3); transition:transform .15s, box-shadow .2s;}
#tutProx:hover{box-shadow:0 0 26px rgba(232,180,90,.5);}
#tutProx:active{transform:scale(.95);}
.tut-dots{display:flex; gap:5px;}
.tut-dots span{width:7px; height:7px; border-radius:50%; background:rgba(232,180,90,.25);
  transition:background .3s, transform .3s;}
.tut-dots span.on{background:#e8b45a; transform:scale(1.25);}
@media (prefers-reduced-motion: reduce){ #tutFoco::after{animation:none;} }