body, html {
      margin: 0;
      padding: 0;
      height: 100%;
      font-family: 'Montserrat', sans-serif;
      font-size: 13px;
      color: #fff;
    }

    .fondo {
      background: url('../img/Fondo-01.jpg') no-repeat center center;
      background-size: cover;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding-top: 0.5rem;
      position: relative;
    }
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* puedes subirlo a 0.6 o 0.7 si deseas más oscuridad */
  z-index: 0;
}
    .contenedor-formulario {
      text-align: center;
      width: 100%;
    }

    .logo-esta {
      max-width: 180px;
      margin-top: 0.5rem;
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
    }

    .bloque-central {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content:flex-end;
      min-height: 80vh;
      position: relative;
    }

    .logo-titulo {
      max-width: 80%;
      margin-bottom: 1rem;
      z-index: 1;
    }

    .chica-con-form {
      position: relative;
      width: 100%;
      max-width: 350px;
      display: flex;
      flex-direction: column;
      align-items: center;
        z-index: 3; 
    }

    .Chica {
      max-width: 180px; 
      z-index: 4;
    }

.form-box {
  width: 100%;
    background: linear-gradient(to bottom, #A7CF38, #242d0a); /* Degradado */
  border: 2px solid #000; /* Borde negro interno */
  border-radius: 0.5rem; /* Puedes ajustar el redondeado si lo deseas más cuadrado */
  padding: 1.5rem 1rem;
  margin-top: -40px;
  position: relative;
  z-index: 2;
  /* Doble borde visual con box-shadow */
  box-shadow:
    0 0 0 4px #555454,       /* Borde gris exterior */
    0 10px 25px rgba(0, 0, 0, 0.452); /* Sombra general */
}
.form-box a {
  color: #000;
  text-decoration: underline; /* opcional, para que siga viéndose como enlace */
}
    .redes-compartir a {
      font-size: 1.5rem;
      margin: 0 10px;
      color: #333;
    }

    .redes-compartir a:hover {
      color: #000;
    }

    .logo-ta {
      width: 60px;
      margin-top: 0rem;
      opacity: 0.9;
    }

    @media (max-width: 576px) {
      .logo-esta {
        max-width: 190px;
      }

      .logo-titulo {
        max-width: 250px;
      }

      .Chica {
        max-width: 130px;
      }

      .form-box {
        padding: 1.5rem;
      }
    }


 .btn-continuar {
      background-color: #939598;
      border-color: #939598;
      border-radius: 2rem;
    }

    .btn-continuar:hover {
      background-color: #7f8183;
      border-color: #7f8183;
    }


#codigoGenerado {
  font-size: 12px;
  color: #000000;
  letter-spacing: 0px;
  border: 2px dashed #e6e6e6;
  border-radius: 8px;
  padding: 10px 0px;
  background: #ffffff;
  display: flex;
  justify-content: center; /* Centra el texto horizontalmente */
  align-items: center;     /* Centra verticalmente si hay más altura */
  width: fit-content;
  margin: 0 auto;          /* Centra el div en su contenedor */
}


 .redes-compartir i {
  color: white;
  transition: color 0.3s ease;
}

.redes-compartir a:hover i {
  color: #ccc; /* o el color que prefieras al pasar el mouse */
}