/* ===================================== */
/* ===== TOOLTIP MAUSOLÉU DEFINITIVO ===== */
/* ===================================== */

.tooltip-wrapper{
  position: relative;
  display: inline-block;
  z-index: 50;
}

.tooltip-trigger{
  cursor: pointer;
  transition: color .3s ease;
}

/* ===== DESKTOP (somente dispositivos com hover real) ===== */
@media (hover: hover) {

  .tooltip-trigger:hover{
    color: var(--red);
  }

  .tooltip-wrapper:hover .tooltip-box{
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ===== MOBILE (somente dispositivos touch) ===== */
@media (hover: none) {

  .tooltip-wrapper.active .tooltip-trigger{
    color: var(--red);
  }

  .tooltip-wrapper.active .tooltip-box{
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ===== CAIXA ===== */

.tooltip-box{
  position: absolute;
  top: 120%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 420px;
  max-width: 90vw;
  padding: 28px;

  background: #0c0c0c;
  border: 1px solid rgba(201,162,63,.4);

  box-shadow:
    0 0 0 1px rgba(192,24,24,.35),
    0 0 25px rgba(192,24,24,.6),
    0 0 50px rgba(192,24,24,.35);

  opacity: 0;
  pointer-events: none;
  transition: all .4s ease;

  z-index: 999;
}

/* ===== ESTILO INTERNO ===== */

.tooltip-box h3{
  font-family:'Cinzel', serif;
  color: var(--gold);
  font-size: 18px;
  letter-spacing: 2px;
  margin-bottom: 15px;
  text-align: center;
}

.tooltip-box p{
  font-family: 'CG-Light', serif;
  font-size: 16px;
  color: #d0d0d0;
  line-height: 1.6;
  text-align: justify;
}