:root{
  --red:#C0121A;
  --surface:#ffffff;
  --tx:#2a2724; --tx-2:#5b564f; --tx-3:#6d675f;
  --line-strong:#dcd7d1;
  --warn:#93610C; --warn-soft:#fbf1de;
  
  --apagado:rgba(33,31,29,.58);
  --shadow-2:0 2px 5px rgba(33,31,29,.06), 0 14px 30px rgba(33,31,29,.08);
  --r-md:16px; --r-lg:22px; --r-pill:999px;
  --font:'IBM Plex Sans',system-ui,sans-serif;
}















.tour{ position:fixed; inset:0; z-index:120; }
.tour-panel{
  position:fixed;
  background:var(--apagado);
  

  backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
}



.tour-anillo{
  position:fixed; pointer-events:none;
  border:3px solid var(--red); border-radius:var(--r-md);
  box-shadow:0 0 0 3px rgba(255,255,255,.85);
}
.tour-globo{
  position:fixed; width:min(340px, calc(100vw - 24px));
  background:var(--surface); color:var(--tx);
  border:1px solid var(--line-strong); border-radius:var(--r-lg);
  box-shadow:var(--shadow-2); padding:16px 16px 12px;
}
.tour-cuenta{
  margin:0 0 4px; font-size:12px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--red);
}
.tour-globo h3{ margin:0 0 6px; font-size:19px; font-weight:600; line-height:1.25; }


.tour-texto{ margin:0 0 14px; font-size:16px; line-height:1.45; color:var(--tx-2); }
.tour-bts{ display:flex; align-items:center; gap:8px; }
.tour-sep{ flex:1; }



.tour-bts button{
  min-height:48px; padding:0 18px; border-radius:var(--r-pill);
  font-family:var(--font); font-size:15px; font-weight:600; cursor:pointer;
}
.tour-sig{ background:var(--red); color:#fff; border:1px solid var(--red); }
.tour-atras{ background:var(--surface); color:var(--tx-2); border:1px solid var(--line-strong); }




.tour-saltar{ background:none; border:1px solid transparent; color:var(--tx-3); padding:0 10px; }
.tour-saltar:hover{ color:var(--tx); }
.tour-bts button:focus-visible{ outline:3px solid var(--red); outline-offset:2px; }


body.con-tour{ overflow:hidden; }
@media (prefers-reduced-motion: reduce){
  .tour-panel, .tour-anillo, .tour-globo{ transition:none !important; }
}





.tour.oculto, .tour .oculto{ display:none !important; }





.tour.tour-conmigo{ pointer-events:none; }
.tour.tour-conmigo .tour-panel, .tour.tour-conmigo .tour-globo{ pointer-events:auto; }





.tour.tour-esperando .tour-panel, .tour.tour-esperando .tour-anillo{ display:none; }



.tour-aviso{
  margin:0 0 12px; padding:8px 10px; border-radius:var(--r-md);
  background:var(--warn-soft); color:var(--warn);
  font-size:15px; line-height:1.4;
}