/* CSS para los tooltips de las redes sociales del footer */

.tooltipFacebook {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* Tooltip arriba a la izquierda */
.tooltipFacebook::after {
  content: "Facebook: @PositivaCompañiadeSeguros";
  position: absolute;
  bottom: 125%;   
  left: 15px;       
  background: #FF7500;
  color: #fff;
  padding: 6px 10px;
  border-radius: 5px 5px 5px 0px;
  font-size: 14px;
  white-space: nowrap;

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 999;
}

/* Flecha en la esquina inferior izquierda del tooltip */
.tooltipFacebook::before {
  content: "";
  position: absolute;
  bottom: 99%;  /* un poco menos que ::after para que quede justo debajo */
  left: 15px;    /* mueve la flecha hacia la esquina izquierda del tooltip */
  /* apunta hacia abajo (hacia el ícono) */
  border-left: 0px solid transparent;   /* lado izquierdo recto */
  border-right: 10px solid transparent; /* lado derecho diagonal */
  border-top: 10px solid #FF7500;   
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 998;
}

/* Mostrar al pasar el mouse */
.tooltipFacebook:hover::after,
.tooltipFacebook:hover::before {
  opacity: 1;
  visibility: visible;
}

.tooltipInstagram {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* Tooltip oculto */
.tooltipInstagram::after {
  content: "Instagram: @Positivacol"; /* Texto del tooltip */
  position: absolute;
  bottom: 125%;   
  left: 15px;       
  background: #FF7500;
  color: #fff;
  padding: 6px 10px;
  border-radius: 5px 5px 5px 0px;
  font-size: 14px;
  white-space: nowrap;

  /* oculto por defecto */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 999;
}

/* Flechita */
.tooltipInstagram::before {
  content: "";
  position: absolute;
  bottom: 99%;  /* un poco menos que ::after para que quede justo debajo */
  left: 15px;    /* mueve la flecha hacia la esquina izquierda del tooltip */
  /* apunta hacia abajo (hacia el ícono) */
  border-left: 0px solid transparent;   /* lado izquierdo recto */
  border-right: 10px solid transparent; /* lado derecho diagonal */
  border-top: 10px solid #FF7500;   

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 998;
}

/* Al pasar el mouse aparece todo */
.tooltipInstagram:hover::after,
.tooltipInstagram:hover::before {
  opacity: 1;
  visibility: visible;
}
.tooltipTwitter {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* Tooltip oculto */
.tooltipTwitter::after {
  content: "Twitter: @Positivacol"; /* Texto del tooltip */
  position: absolute;
  bottom: 125%;   
  left: 15px;       
  background: #FF7500;
  color: #fff;
  padding: 6px 10px;
  border-radius: 5px 5px 5px 0px;
  font-size: 14px;
  white-space: nowrap;

  /* oculto por defecto */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 999;
}

/* Flechita */
.tooltipTwitter::before {
  content: "";
  position: absolute;
  bottom: 99%;  /* un poco menos que ::after para que quede justo debajo */
  left: 15px;    /* mueve la flecha hacia la esquina izquierda del tooltip */
  /* apunta hacia abajo (hacia el ícono) */
  border-left: 0px solid transparent;   /* lado izquierdo recto */
  border-right: 10px solid transparent; /* lado derecho diagonal */
  border-top: 10px solid #FF7500;   

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 998;
}

/* Al pasar el mouse aparece todo */
.tooltipTwitter:hover::after,
.tooltipTwitter:hover::before {
  opacity: 1;
  visibility: visible;
}

.tooltipYoutube {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* Tooltip oculto */
.tooltipYoutube::after {
  content: "Youtube: @Positivacolombia"; /* Texto del tooltip */
  position: absolute;
  bottom: 125%;   
  left: 15px;       
  background: #FF7500;
  color: #fff;
  padding: 6px 10px;
  border-radius: 5px 5px 5px 0px;
  font-size: 14px;
  white-space: nowrap;

  /* oculto por defecto */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 999;
}

/* Flechita */
.tooltipYoutube::before {
  content: "";
  position: absolute;
  bottom: 99%;  /* un poco menos que ::after para que quede justo debajo */
  left: 15px;    /* mueve la flecha hacia la esquina izquierda del tooltip */
  /* apunta hacia abajo (hacia el ícono) */
  border-left: 0px solid transparent;   /* lado izquierdo recto */
  border-right: 10px solid transparent; /* lado derecho diagonal */
  border-top: 10px solid #FF7500;   

  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
  z-index: 998;
}

/* Al pasar el mouse aparece todo */
.tooltipYoutube:hover::after,
.tooltipYoutube:hover::before {
  opacity: 1;
  visibility: visible;
}