:root{
    --Fondo:#4087cf;
}
/* 1. Prepara el enlace para anclar el letrero */
.link-tooltip {
  position: relative;
}

/* 2. Diseña la caja del letrero personalizado */
.link-tooltip::after {
  content: attr(data-title); /* Lee el texto de data-title */
  position: absolute;
  top: 130%;                /* Lo posiciona abajo del enlace */
  left: 50%;
  transform: translateX(-50%);
  
  /* ESTILO CORPORATIVO AJUSTABLE */
  background-color:var(--Fondo); /* Color oscuro idéntico a tu cabecera */
  color: #ffffff;            /* Texto blanco */
  font-size: 1em;
  font-family: Arial, sans-serif;
  font-weight: normal;
  padding: 2px 10px;
  border-radius: 4px;
  white-space: nowrap;       /* Evita saltos de línea */
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  
  /* Oculto por defecto con transición suave */
  pointer-events: none;      /* Evita que el letrero interfiera con el mouse */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* 3. Diseña la pequeña flecha decorativa apuntando hacia arriba */
.link-tooltip::before {
  content: '';
  position: absolute;
  top: 108%;
  left: 50%;
  transform: translateX(-50%);
  
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent var(--Fondo) transparent;

  /* NUEVAS PROPIEDADES: Definimos las dimensiones del cuadrito */
  width: 0;
  height: 0;

  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* 4. ACCIÓN: Activa el letrero únicamente al pasar el cursor (Hover) */
.link-tooltip:hover::after,
.link-tooltip:hover::before {
  opacity: 1;
  visibility: visible;
}
@media (max-width: 768px) {
  .link-tooltip::after {font-size: 0.8em;}
}