:root{
    --theme: #262A33;
}

body {
    position: relative;
    font-family: Verdana;
    text-align: center;
    background-color: var(--theme);
    margin: 0;
    padding: 0;
    min-height: 100vh;
}
  
/* Marca de agua semitransparente detrás de todo */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('logo.png');
    background-repeat: repeat;
    background-position: center;
    background-size: 150px auto; /* Mantiene proporción */
    opacity: 0.05;
    pointer-events: none;
    z-index: 0;
}
  
#logo-fixed {
    position: fixed;
    top: 10px;
    left: 10px;
    width: 120px; /* Reducido para ocupar menos espacio */
    height: auto; /* Mantiene proporción */
    z-index: 10;
}
  
.logo-mobile {
    display: none; /* Oculto por defecto */
    margin: 0px auto;
    max-width: 120px; /* Pequeño para móviles */
}

 
.logo-normal {
    max-width: 250px;
}
/* Formulario con z-index mayor para estar encima */
  form#form {
    position: relative; /* Necesario para z-index */
    z-index: 5;
    background-color: #fff;
    max-width: 500px;
    margin: 50px auto;
    padding: 30px 20px;
    box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.5);
    text-align: left;
  }

/* Styling the Form (Color, Padding, Shadow) */
form {
    background-color: #fff;
    max-width: 500px;
    margin: 50px auto;
    padding: 30px 20px;
    box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.5);
}

h2, h3 {
    color: white;
    text-align: center;
}

/* Styling form-control Class */
.form-control {
    text-align: left;
    margin-bottom: 25px;
}

/* Styling form-control Label */
.form-control label {
    text-align: justify;
    display: block;
    margin-bottom: 10px;
}

/* Styling form-control input,
select, textarea */
.form-control input,
.form-control select,
.form-control textarea {
    border: 1px solid #777;
    border-radius: 2px;
    font-family: inherit;
    padding: 10px;
    display: block;
    width: 95%;
    outline: none;
    max-width: 95%;
    max-height: 300px;
}

input:focus, textarea:focus{
    border: 3px solid black;
}

/* Styling form-control Radio
button and Checkbox */
.form-control input[type="radio"],
.form-control input[type="checkbox"] {
    display: inline-block;
    width: auto;
}

/* Styling Button */
button {
    background-color: var(--theme);
    color: white;
    border: 1px solid #777;
    border-radius: 7px;
    font-family: inherit;
    font-size: 21px;
    display: block;
    width: 100%;
    margin-top: 50px;
    margin-bottom: 20px;
    padding: 5px;
}

button:hover, input[type="radio"], input[type="checkbox"]{
    cursor: pointer;
}

.section-separator {
    border: none;
    height: 3px;
    background-color: #0033A0;  /* Azul */
    margin: 30px 0;
}

/* Estilos para radio buttons en fila */
.radio-group {
    display: flex;
    justify-content: space-between;  /* Distribuye espacio igual entre opciones */
    flex-wrap: wrap;
    margin-top: 5px;
}
.radio-group label {
    display: flex;
    align-items: center;
    flex: 1;  /* Cada label ocupa espacio igual */
    justify-content: center;  /* Centra el contenido */
    margin: 0;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #f9f9f9;
    text-align: center;
}
.radio-group label:hover {
    background: #e0e0e0;
}

.transformation-block {
    margin-bottom: 20px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background: #f9f9f9;
}
.transformation-block strong {
    display: block;
    margin-bottom: 10px;
    color: #0033A0;
}

/* Media queries para móviles */
@media (max-width: 768px) {
    #logo-fixed {
        display: none; /* Oculta logo fijo en móviles */
    }
    .logo-mobile {
        display: block; /* Muestra logo arriba del form en móviles */
    }
    form#form {
        margin-top: 20px; /* Reduce margen para que el logo no ocupe tanto */
    }
}


.google-btn {
  display: inline-block;
  background-color: #4285f4;
  color: white;
  padding: 10px 20px;
  text-decoration: none;
  border-radius: 5px;
  font-size: 16px;
}
.google-btn:hover {
  background-color: #357ae8;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* Ocupa toda la altura de la ventana */
  flex-direction: column; /* Apila elementos verticalmente si hay más */
  padding: 20px; /* Espacio opcional */
}

.card {
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  padding: 20px;
  max-width: 600px;
  width: 100%; /* Para que sea responsivo */
  text-align: center;
  margin: 0; /* Removido para evitar conflictos con centering */
}