.form{
  margin: 1em;
}

.form h2 {
  padding: 1em 0em;
}

.form h3 {
  color: var(--dark-gray);
}

.file {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1em;
  margin: 1em 0em;
}

.file input {
  flex: 1;
  padding: 1em;
  font-size: 1em;
  width: 100%;
}

/* Botones circulares */
.btn- {
  font-weight: bold;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  margin-right: 0.5em;
  border: none;
  background: var(--coral-red);
  color: var(--whihte);
  font-size: 1em;
}

.btn-:hover {
  background: var(--medium-gray);
  cursor: pointer;
}

/* Botón agregar persona */
.add {
  display: flex;
  align-items: center;
  margin: 1.5em;
}

.btnadd {
  font-weight: bold;
  width: 3em;
  height: 3em;
  border-radius: 50%;
  border: none;
  background: var(--sky-blue);
  color: var(--white);
  font-size: 1em;
} 

.btnadd:hover {
  background: var(--medium-gray);
  cursor: pointer;
}

.add h6 {
  margin-left: 1em;
  font-size: 1em;
  color: var(--dark-gray);
}

/* Caja monto */
.cost {
  display: flex;
  align-items: center;
  padding: 1em;
}

.cost h6 {
  font-weight: bold;
  font-size: 1em;
  background: var(--dark-gray);
  color: var(--whihte);
  border: none;
  padding: 1em;
  border-radius: 0.5em;
}

.register {
  background: var(--success-green);
  color: var(--whihte);
  border: none;
  padding: 1em;
  border-radius: 0.5em;
  font-size: 1em;
  margin-left: 0.5em;
  text-decoration: none;
  display: inline-block;
  text-align: center;
  font-family: var(--alan-sans);
  font-weight: 600;
}

.register:hover {
  background: var(--dark-green);
  cursor: pointer;
}

/* tamaño tablet*/
@media screen and (min-width: 47em) {
    .file {
        flex-direction: row;
    }

  }

/* tamaño desktop*/
  @media screen and (min-width: 60em) {
    .file {
        flex-direction: row;
    }

  }