@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;
  }