/* ============================================================
   Tour interactivo de bienvenida — TaxCalendarSaleUSA
   Usa las mismas variables de color/tipografía definidas en
   :root dentro del <style> principal de index.html.
   ============================================================ */

.tour-highlight {
  position: fixed;
  z-index: 700;
  border: 2px solid var(--gold);
  border-radius: 4px;
  /* Oscurece todo lo que está fuera de la caja (efecto "spotlight") */
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.75);
  pointer-events: none;
  transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease;
}

.tour-tooltip {
  position: fixed;
  z-index: 701;
  width: 280px;
  max-width: calc(100vw - 28px);
  background: var(--ink2);
  border: 1px solid rgba(201, 150, 58, 0.4);
  padding: 18px 20px;
  transition: top .25s ease, left .25s ease;
}

.tour-tooltip-tag {
  font-family: sans-serif;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold);
  margin-bottom: 8px;
}

.tour-tooltip-title {
  font-size: 17px;
  font-weight: normal;
  color: var(--cream);
  margin-bottom: 8px;
}

.tour-tooltip-text {
  font-family: sans-serif;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(242, 238, 228, 0.7);
  margin-bottom: 14px;
}

.tour-dots {
  display: flex;
  gap: 5px;
  margin-bottom: 14px;
}

.tour-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border);
}

.tour-dot.active {
  background: var(--gold);
}

.tour-tooltip-btns {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tour-btn-skip {
  font-family: sans-serif;
  font-size: 11px;
  color: var(--slate);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0;
}

.tour-btn-skip:hover {
  color: var(--cream);
}

.tour-progress {
  font-family: sans-serif;
  font-size: 10px;
  color: var(--slate);
}

.tour-btn-next {
  font-family: sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 7px 14px;
  background: var(--gold);
  color: var(--ink);
  border: none;
  cursor: pointer;
  transition: opacity .2s;
  white-space: nowrap;
}

.tour-btn-next:hover {
  opacity: .88;
}

@media (max-width: 480px) {
  .tour-tooltip { width: 240px; padding: 16px; }
}