@font-face {
  font-family: "govco-fontv2";
  src: url("../assets/font/govco/govco-fontv2.eot?35076025");
  src: url("../assets/font/govco/govco-fontv2.eot?35076025#iefix")
      format("embedded-opentype"),
    url("../assets/font/govco/govco-fontv2.woff2?35076025") format("woff2"),
    url("../assets/font/govco/govco-fontv2.woff?35076025") format("woff"),
    url("../assets/icons/fonts/govco-font-icons.ttf") format("truetype"),
    url("../assets/icons/govco/govco-fontv2.svg?35076025#govco-fontv2")
      format("svg");
  font-weight: normal;
  font-style: normal;
}

/* Estilos para el botón flotante */
.volver-arriba-govco {
  position: fixed; /* Fija el botón en la ventana */
  bottom: 20px; /* A 20px desde el fondo de la ventana */
  right: 20px; /* A 20px desde la derecha de la ventana */
  color: #ffffff;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #3366cc 0% 0% no-repeat padding-box;
  box-shadow: 4px 4px 6px #00000029;
  transform: translateX(0);
  transition: all 300ms;
  text-align: center;
  border-width: 0px;
}

/* Ícono dentro del botón */
.volver-arriba-govco::before {
  font-family: "govco-fontv2";
  content: "\e8b4";
  display: inline-block;
  font-weight: 900;
  line-height: 1;
  font-size: 36px;
  margin-top: 8px;
  margin-bottom: 8px;
}

/* Hover: Cambia el tamaño y el estilo del botón */
.volver-arriba-govco:hover {
  color: white;
  width: 118px;
  height: 54px;
  background: #004884 0% 0% no-repeat padding-box;
  box-shadow: 4px 4px 6px #00000029;
  border-radius: 27px 10px 10px 27px;
  text-align: center;
  border-width: 0px;
  text-align: left;
  transform: translateX(-50%);
  transition: all 300ms;
}

/* Cambio de ícono cuando el botón está en hover */
.volver-arriba-govco:hover::before {
  font-family: "govco-fontv2";
  content: "\e8b4";
  display: inline-block;
  font-weight: 900;
  line-height: 1;
  font-size: 36px;
  margin-top: 8px;
  margin-bottom: 8px;
  margin-left: 6px;
}

/* Texto "Volver arriba" al hacer hover */
.volver-arriba-govco:hover::after {
  content: "Volver arriba";
  color: white;
  position: absolute;
  text-align: center;
  font: normal normal medium 16px/19px Work Sans;
  letter-spacing: 0px;
  margin-top: 8px;
  margin-left: 8px;
  line-height: 1.2;
  width: 52px;
  height: 42px;
}

/* Estilo cuando el botón está en foco o activo */
.volver-arriba-govco:focus,
.volver-arriba-govco:active {
  color: white;
  width: 118px;
  height: 54px;
  background: #004884 0% 0% no-repeat padding-box;
  box-shadow: 4px 4px 6px #00000029;
  border-radius: 27px 10px 10px 27px;
  border-width: 0px;
  text-align: left;
  outline: 7px double black !important;
  transform: translateX(-50%);
  transition: all 300ms;
}

/* Ícono cuando el botón está en foco o activo */
.volver-arriba-govco:focus::before,
.volver-arriba-govco:active::before {
  font-family: "govco-fontv2";
  content: "\e8b4";
  display: inline-block;
  font-weight: 900;
  line-height: 1;
  font-size: 36px;
  margin-top: 8px;
  margin-bottom: 8px;
  margin-left: 6px;
}

/* Texto "Volver arriba" cuando está en foco o activo */
.volver-arriba-govco:focus::after,
.volver-arriba-govco:active::after {
  content: "Volver arriba";
  color: rgba(255, 255, 255, 0.932);
  position: absolute;
  text-align: center;
  font: normal normal medium 16px/19px Work Sans;
  letter-spacing: 0px;
  margin-top: 8px;
  margin-left: 8px;
  line-height: 1.2;
  width: 52px;
  height: 42px;
}