/* Botón "tarjeta" con tooltip, adaptado a los colores del logo MarckBusiness (azul y naranja). */
:root {
  --logo-azul: #2f6bff;
  --logo-azul-oscuro: #0b2e6b;
  --logo-naranja: #ff8a1f;
  --logo-amarillo: #ffd23f;
}

.uiverse {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 170px; height: 52px; margin: 10px; padding: 0 14px; border: 0; border-radius: 12px;
  background: #ffffff; color: var(--logo-azul-oscuro);
  font-family: var(--titulo); font-size: 16px; font-weight: 700; letter-spacing: .02em; text-decoration: none;
  box-shadow: 0 10px 30px -10px rgba(255,138,31,.45);
  cursor: pointer; transition: all .25s cubic-bezier(.68,-.55,.265,1.55);
}
.uiverse .texto { position: relative; z-index: 1; }

.uiverse .tooltip {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 12px; white-space: nowrap; letter-spacing: .04em;
  background: var(--logo-naranja); color: #05070d;
  padding: 5px 10px; border-radius: 6px; box-shadow: 0 10px 20px rgba(0,0,0,.25);
  opacity: 0; pointer-events: none; transition: all .3s cubic-bezier(.68,-.55,.265,1.55);
}
.uiverse .tooltip::before {
  content: ""; position: absolute; height: 8px; width: 8px; background: var(--logo-naranja);
  bottom: -3px; left: 50%; transform: translate(-50%) rotate(45deg);
}

.uiverse:hover {
  background: linear-gradient(320deg, var(--logo-azul-oscuro), var(--logo-azul));
  color: #ffffff; box-shadow: 0 14px 40px -10px rgba(47,107,255,.6);
}
.uiverse:hover .tooltip { top: -42px; opacity: 1; }

.uiverse:focus-visible { outline: 2px solid var(--logo-amarillo); outline-offset: 4px; }

@media (max-width: 560px) {
  .uiverse { width: 100%; }
}