:root {
    --Green600: hsl(169, 82%, 27%);
    --Green200: hsl(148, 38%, 91%);
    --Red: hsl(0, 66%, 54%);

    --fontKarla:  "Karla", sans-serif;
}



html {
    font-family: var(--fontKarla);
    font-size: 62.5%;
    box-sizing: border-box;  /* life hack de box model */
    scroll-snap-type: Y mandatory;
    background-color: var(--Green200);
}


*, *:before, *:after {
    box-sizing: inherit;
}

h2{
    font-size: 2rem;
}

label,
p {
    font-size: 1.5rem;
}



.formulario {
background-color: white;
width: min(60rem, 100%);  /*utiliza el valor mas pequeño haciendo una comparacion entre 2 valores */
margin: 0 auto; /* margin 0 auto se utiliza mejor en formularios */
padding: 3rem;
border-radius: 1rem;
}
.formulario fieldset {
    padding-right: 0%;
    padding-left: 0%;
    border: none;
}


@media (min-width: 768px) {
    .contenedor-campos {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto ;
        column-gap: 2rem;
        max-width: 100%;
        
    }
}

.campo:nth-child(3),
.campo:nth-child(5) {
    grid-column: 1 / 3;
    
}


.campo {
margin-bottom: 1rem;
}

.campo label {
    
color: var(--blanco);
font-weight:bold;
margin-bottom: .5rem;
padding-top: 1rem;
padding-bottom: 1rem;
display: block;
}


.input-text {
    width: 100%;
    padding: 1.5rem;
    border-radius: 0.5rem;
    border-color: black;
}



.campo textarea {
    height: 20rem;
}



.boton { /*boton de CONTACTAR */
    background-color: var(--Green600);
    color: white;
    padding: 1rem 3rem;
    margin-top: 1rem;
    font-size: 2rem;
    text-decoration: none;
    font-weight: bold;
    border-radius: .5rem;
    width: 90%;
    text-align: center;
    
}

.flex {
 display: flex;
}



.boton:hover {
    cursor: pointer;
}


.alinear-derecha {
    justify-content: center;
    padding-right: 0.5%;
}


.seccion-contacto {
    padding-bottom: 3rem;
}

@media(min-width: 768px) {
    .querySection {
  grid-column: 1 / 3; /* para que ocupe ambas columnas del grid */
  font-weight: bold;
}
}


.opciones-radio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1rem;
}

.generalEnquiry,
.supportRequest {
      border: 2px solid black;
      padding: 1rem;
}

.generalEnquiry:hover{
    cursor: pointer;
}
.supportRequest:hover {
    cursor: pointer;
}



@media (max-width: 768px) {
  .opciones-radio {
    grid-template-columns: 1fr; /* de 2 columnas pasa a 1 */
  }
}

.checkbox {
    display: inline-block;
}

.input-error {
  border: 2px solid red;
  transition: border 0.3s ease;
  font-size: 2rem;
}

#error-message {
  color: red;
  font-weight: bold;
  margin-top: 10px;
  display: none;
}


.invalid {
  border: 1px solid #d9534f;
}

/* Éxito */
#success-message {
  display: none;
  position: fixed;
  background-color: #004d40;
  color: white;
  padding: 1em;
  border-radius: 8px;
  margin-bottom: 1rem;
  margin: 0 5rem 2rem 9rem;
  max-width: 90%;   
}

#success-message.show {
  display: block;
}



.success{
    text-align: start;
    
}