body {

      margin: 0;

      font-family: Arial, sans-serif;

      background: url('../imagenes/cancha2.jpg') no-repeat center center fixed;

      background-size: cover;

      color: #000;

      display: flex;

      flex-direction: column;

      align-items: center;

    }

    .logo {

      margin-top: 60px;

      width: 200px;

      height: 200px;

      background: white;

      border-radius: 50%;

      display: flex;

      align-items: center;

      justify-content: center;

      margin-bottom: 20px;

    }



    .logo img {

      max-width: 90%;

      max-height: 90%;

      border-radius: 50%;

    }



    .button-container {
      /* Contenedor para centrar el botón si fuera necesario, aunque con align-items: center en body ya lo centra */
      width: 100%; /* Ocupa todo el ancho disponible */
      text-align: center; /* Centra el botón dentro de su contenedor */
      margin-bottom: 30px; /* Espacio entre el botón y la sección "Quiénes Somos" */
    }

    .register-button {
      /* Estilos para hacer el botón más llamativo */
      background-color: #4caf50; /* Un verde vibrante */
      color: white;
      padding: 15px 30px; /* Más padding para que sea más grande */
      border: none;
      border-radius: 8px; /* Bordes más redondeados */
      font-size: 1.2em; /* Tamaño de fuente más grande */
      font-weight: bold;
      cursor: pointer;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sombra para profundidad */
      transition: background-color 0.3s ease, transform 0.2s ease; /* Transiciones suaves */
      text-transform: uppercase; /* Texto en mayúsculas */
      letter-spacing: 1px; /* Espaciado entre letras */
    }

    .register-button:hover {
      background-color: #45a049; /* Verde ligeramente más oscuro al pasar el ratón */
      transform: translateY(-2px); /* Pequeño efecto de levantamiento */
    }



    



    .about {

      margin-top: 20px;

      width: 90%;

      max-width: 600px;

      background: rgba(255, 255, 255, 0.8);

      padding: 20px;

      border-radius: 10px;

      text-align: justify;

    }



    .about h2 {

      margin-top: 0;

    }



    .social {

      margin-top: auto;

      margin-bottom: 40px;

      text-align: center;

    }



    .social a {

      margin: 0 10px;

      font-size: 24px;

      text-decoration: none;

    }



    .social img {

      width: 30px;

      height: 30px;

    } 

    

   

   

   

   

   

   

   

   /* Estilos para el fondo del modal (el "overlay") */

        .modal-overlay {

            display: none; /* Por defecto, el modal estará oculto */

            position: fixed;

            z-index: 1000;

            left: 0;

            top: 0;

            width: 100%;

            height: 100%;

            background-color: rgba(0, 0, 0, 0.5); /* Fondo semitransparente oscuro */

            justify-content: center;

            align-items: center;

        }



        /* Estilos para el contenido del modal */

        .modal-content {

            background-color: #e0f0e0; /* Color verde claro similar al de la imagen */

            padding: 30px;

            border-radius: 10px;

            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

            text-align: center;

            width: 90%;

            max-width: 400px;

            font-family: Arial, sans-serif;

            border: 2px solid #b0d8b0; /* Borde más oscuro para el contraste */

            position: relative; /* Para posicionar el botón de cerrar */

        }



        /* Estilos para el título */

        .modal-title {

            font-size: 20px;

            font-weight: bold;

            color: #333;

            margin-bottom: 20px;

        }



        /* Estilos para el campo de entrada */

        .modal-input {

            width: 100%;

            padding: 12px;

            margin-bottom: 20px;

            border: 1px solid #ccc;

            border-radius: 5px;

            box-sizing: border-box; /* Para que el padding no afecte el ancho total */

            background-color: #f0f0f0; /* Color gris claro similar al de la imagen */

        }



        /* Estilos para el botón principal */

        .modal-button {

            background-color: #63c763; /* Color verde vibrante similar al de la imagen */

            color: white;

            padding: 10px 20px;

            border: none;

            border-radius: 5px;

            cursor: pointer;

            font-size: 16px;

            font-weight: bold;

            transition: background-color 0.3s ease;

        }



        .modal-button:hover {

            background-color: #55a855; /* Un verde un poco más oscuro al pasar el mouse */

        }



        /* Estilos para el botón de cerrar */

        .modal-close-button {

            position: absolute;

            top: 10px;

            right: 10px;

            background: none;

            border: none;

            color: #555;

            font-size: 20px;

            cursor: pointer;

            outline: none;

            transition: color 0.3s ease;

        }



        .modal-close-button:hover {

            color: #000;

        }



        /* Clase para mostrar el modal */

        .show-modal {

            display: flex;

        }


                /* Media Queries para responsividad */
        @media (max-width: 768px) {
          .logo {
            margin-top: 40px;
            width: 150px;
            height: 150px;
          }

          .register-button {
            padding: 12px 25px;
            font-size: 1em;
          }

          .about {
            width: 95%;
            padding: 15px;
          }

          .modal-content {
            padding: 20px;
          }

          .modal-title {
            font-size: 18px;
          }

          .modal-input {
            padding: 10px;
          }

          .modal-button {
            padding: 8px 15px;
            font-size: 14px;
          }
        }

        @media (max-width: 480px) {
          .logo {
            margin-top: 30px;
            width: 120px;
            height: 120px;
          }

          .register-button {
            padding: 10px 20px;
            font-size: 0.9em;
          }

          .about {
            padding: 10px;
            font-size: 0.9em;
          }

          .social img {
            width: 25px;
            height: 25px;
          }
        }