.tooltip-container {
    position: relative; /* ya lo tienes */
    display: flex;
    align-items: start;
}

.custom-tooltip {
  display:none;
  position: absolute;
  top: 100%;  /* aparece debajo */
  margin-top: -10px;
  left: 10px;
  background: #fefefe;
  color: #333;
  padding: 10px;
  border-radius: 8px;
  box-shadow: 0px 4px 10px rgba(0,0,0,0.25);
  font-size: 0.9em;
  z-index: 1000;
  width: 290px;
  text-align: right;
}

.tooltip-container:hover .custom-tooltip {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* Opcional: flecha del tooltip */
.custom-tooltip::after {
    content: "";
    position: absolute;
    top: -5px; /* ajusta según sea necesario */
    left: 10px; /* alineación de la flecha */
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #15379c transparent; /* flecha apuntando hacia arriba */
}


.titulo-consultores {
  font-size: .8em !important;
  letter-spacing: 5px;
  line-height: 1;
  margin-bottom: 7px;
}

.header-consultores {
    padding: 0.5rem 1rem; /* default desktop */
}

.modal-body p {
  font-size: .9em;
  font-family: 'Lato', sans-serif;
  color: black;
}

.parte-superior {
  align-self: flex-start;   /* asegura que se mantenga arriba */
}

.parte-superior p {
  margin-bottom: 0.3rem;    /* ajusta espacio entre los párrafos */
}

.parte-inferior {
  margin-top: auto;         /* empuja el bloque inferior hacia abajo */
}

.encabezado-img {
  position: absolute;
  bottom: 10px;
  right: 10px;
  color: white;
  background-color: rgba(0,0,0,0.5);
  padding: 5px 10px;
  border-radius: 5px;
  font-weight: bold;
  font-size: 0.9rem;
}

@media (max-width: 576px) { /* móviles */
  .titulo-consultores {
    font-size: 18px;
    margin-bottom: 8px;
  }
    .header-consultores {
        padding: 0.25rem 1rem; /* menos alto en móvil */
    }
    .header-consultores img {
        height: 35px; /* opcional: reducir tamaño del logo */
    }
    .encabezado-img {
       font-size: 0.6rem;
    }
}