/* Para que no se pueda hacer scroll mientras este el popup activo */
    body {
      position: block; /* CAMBIAR A FIXED PARA ACTIVAR EL POPUP */
    }

    .overlay {
      position: fixed;           
      top: 0;
      left: 0;
      width: 100vw;       
      height: 100vh;          
      background: rgba(0, 0, 0, 0.7);
      z-index: 999;         
      display: none; /* Cambiar a block para que funcione */         
    }

    /* Hacer que el popup este en el centro de la pagina */
    .popup {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1000;
      background-color: white;
      padding: 15px;
      border-radius: 15px;
      width: 700px;
      display: none; /* QUITAR PARA ACTIVAR EL POPUP */
      box-shadow: 5px 5px 5px rgba(0, 0, 0, .5);
    }

    .popup h2, .popup p {
      color: black;
    }

    /* Hacer que el titulo y la cruz para cerrar el popup esten alineadas */
    .flex-close-popup {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    /* Estilos para la cruz de cerrar el popup */
    .close-x {
      font-size: 20px;
      color: black;
      background-color: grey;
      border: 1px solid grey;
      border-radius: 50%;
      padding: 5px;
    }

    .close-x:hover {
      color: red;
      background-color: black;
      cursor: pointer;
    }

    /* Estilos para el boton para cerrar el popup de debajo del texto */
    .custom-button-close-popup button {
      background-color: black;
      color: white;
      padding: 10px;
      border-radius: 5px;
      transition: all .3s ease;
    }

    .custom-button-close-popup button:hover {
      transform: translateY(-5px);
    }