/* Contenedor */
.plans-esim-tooltip {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

/* Trigger */
.plans-esim-tooltip__trigger {
  background: none;
  border: none;
  padding: 0;

  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;

  font: inherit;
  color: inherit;

  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Tooltip box (oculto por defecto) */
.plans-esim-tooltip__content {
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  z-index: 999999;

  width: min(320px, 90vw);
  padding: 12px 14px;
  border-radius: 10px;

  background: #111;
  color: #fff;
  font-size: 14px;
  line-height: 1.35;

  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 150ms ease, transform 150ms ease;
}

/* Flecha */
.plans-esim-tooltip__content::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 16px;

  border-width: 0 8px 8px 8px;
  border-style: solid;
  border-color: transparent transparent #111 transparent;
}

/* Mostrar tooltip en MOBILE (tap/focus) */
.plans-esim-tooltip__trigger:focus + .plans-esim-tooltip__content,
.plans-esim-tooltip__trigger:active + .plans-esim-tooltip__content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Accesibilidad */
.plans-esim-tooltip__trigger:focus {
  outline: 2px solid rgba(0, 0, 0, 0.25);
  outline-offset: 4px;
}

/* =========================
   DESKTOP ≥ 765px
   ========================= */
@media (min-width: 765px) {
    .plans-esim-tooltip{
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .plans-esim-tooltip__trigger{
        text-align: center;
        cursor: pointer;
        text-decoration: none;
        color: #019df4;
        font-weight: 900;
        font-size: 20px;
    }
  /* Mostrar con hover */
  .plans-esim-tooltip:hover .plans-esim-tooltip__content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Ajustes desktop */
  .plans-esim-tooltip__content {
    width: 340px;
    font-size: 13.5px;
    transform: translateY(-120px);
    background-color:#fff  ;
    position: absolute;
    left: 50%;
    padding: 12px;
    border-radius: 25px;
    box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.15);
    width: 320px;
    color: black;
  }
}